如何显示网页中使用的超链接列表
How do I show a list of hyperlinks used in the webpage?
在我的课堂上，我正在制作 3 个甜点下拉菜单和制作它们的食谱。所有食谱都是超链接。我需要使用 JavaScript 来显示我在页面中使用的所有实际链接的列表。
这是页面应该是什么样子的链接（我正在尝试制作底部显示"本文档中引用的网站"）
http://postimg.org/image/k3r58jw1b/
这是我到目前为止完成的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Easy Dessert Recipes</title>
<link href="css/style.css" rel="stylesheet">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.zoom.min.js"></script>
<style type="text/css">
h2 {
background: url(images/open.png) no-repeat 0 11px;
padding: 10px 0 0 25px;
cursor: pointer;
}
h2.close {
background-image: url(images/close.png);
}
.menu {
border-radius: 10px;
background-color: rgba(0,0,0,.05);
padding: 10px;
margin-bottom: 10px;
}
.recipes {
margin-left: 25px;
}
</style>
<script>
$(document).ready(function() { // this function makes the menu become a drop down menu
$('.recipes').hide();
$('.main h2').click(function() {
var $recipes = $(this).next('.recipes');
if ($recipes.is(':hidden')) {
$recipes.slideDown();
$(this).addClass('close');
} else {
$recipes.fadeOut();
$(this).removeClass('close');
}
}); // end click
//-------------------------------------Zoom Function--------------------------------------
$("#ex1").zoom(); // these lines make the image zoom when you mouse over because of the zoom jquery file
$("#ex2").zoom();
$("#ex3").zoom();
//-----------------------------------MouseOver Function----------------------------------
$('img').mouseover(function() {
$("#popup").width(200).height(200);
}); // End mouseover
$("img").mouseout(function() {
//$("#popup").width(200).height(200);
$('#popup').remove();
}); // End mouseout
//------------------------------------------Reference-----------------------------------
// Get all links to point outside of the site
//---------------------------------------END READY--------------------------------------
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>Chapter 5 Lab</header>
<div class="content">
<div class="main">
<!--------------------------------------BEGIN Mini Cookies-------------------------->
<div class="menu">
<h2>Mini Cookies</h2>
<div class="recipes">
<p>
Soft Mini Chocolate Chip Cookies – No one can resist a soft and chewy cookie, especially when it’s in mini form!
<a href="http://diethood.com/soft-mini-chocolate-chip-cookies/#QecOGKvhKY1KvAYG.99">Find Recipe Here</a>
</p>
<span class='zoom' id='ex1'>
<img src='images/miniCookies.PNG' width='100' height='100' alt='bar'/>
</span>
</div>
</div>
<!--------------------------------------END Mini Cookies-------------------------->
<!--------------------------------------BEGIN Cookie Pie-------------------------->
<div class="menu">
<h2>Cookie Pie</h2>
<div class="recipes">
<p>
There's only one thing better then cookies and that GIGANTIC cookie. Especially one's the size of pies!
<a href="http://pinchofyum.com/deep-dish-chocolate-chip-cookie-with-caramel-sea-salt">Find Recipe Here</a>
</p>
<span class='zoom' id='ex2'>
<img src='images/cookie.PNG' width='100' height='100' alt='bar'/>
</span>
</div>
</div>
<!------------------------------------END Cookie Pie--------------------------------------->
<!-------------------------------- BEGIN Peanut Butter & Jelly Bars ----------------------->
<div class="menu">
<h2>Peanut Butter & Jelly Bars</h2>
<div class="recipes">
<p>
You guys. I don’t even know what to say, other than if you make these bars you’ll want to eat every last crumb!
<a href="http://www.foodnetwork.com/recipes/ina-garten/peanut-butter-and-jelly-bars-recipe.html">Find Recipe Here</a>
</p>
<span class='zoom' id='ex3'>
<img src='images/bar.png' width='100' height='100' alt='bar'/>
</span>
</div>
</div>
<!-------------------------- END Peanut Butter & Jelly Bars ------------------------------->
</div>
</div>
</div>
<footer>
<p>Made by</p>
</footer>
</div>
</body>
</html>我不确定在哪里放置 JavaScript，如果我应该制作另一个div 然后将 JavaScript 链接到它？
这是我问题的解决方案：
在 JavaScript 代码的末尾，但在结束之前准备好 }）;我补充说：
$('a[href^="http://"]').each(function() {
var extLink = $(this).attr('href');
$('#RecipeList').append('<li>' + extLink + '</li>');
});
在我的 HTML 底部，我用这段代码做了一个新的div：
<div id="references">
<h3>Links for recipes</h3>
<ul id="RecipeList">
</ul>
</div>
然后为了给它一个更好的背景，我在CSS中做了这个：
#references {
border-radius: 10px;
background-color: rgba(0,0,0,.05);
padding: 10px;
margin-bottom: 10px;
}
所以整个代码看起来像这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Easy Dessert Recipes</title>
<link href="css/style.css" rel="stylesheet">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.zoom.min.js"></script>
<style type="text/css">
h2 {
background: url(images/open.png) no-repeat 0 11px;
padding: 10px 0 0 25px;
cursor: pointer;
}
h2.close {
background-image: url(images/close.png);
}
.menu {
border-radius: 10px;
background-color: rgba(0,0,0,.05);
padding: 10px;
margin-bottom: 10px;
}
.recipes {
margin-left: 25px;
}
#references {
border-radius: 10px;
background-color: rgba(0,0,0,.05);
padding: 10px;
margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function() { // this function makes the menu become a drop down menu
$('.recipes').hide();
$('.main h2').click(function() {
var $recipes = $(this).next('.recipes');
if ($recipes.is(':hidden')) {
$recipes.slideDown();
$(this).addClass('close');
} else {
$recipes.fadeOut();
$(this).removeClass('close');
}
}); // end click
//-------------------------------------Zoom Function--------------------------------------
$("#ex1").zoom(); // these lines make the image zoom when you mouse over because of the zoom jquery file
$("#ex2").zoom();
$("#ex3").zoom();
//-----------------------------------MouseOver Function----------------------------------
$('img').mouseover(function() {
$("#popup").width(200).height(200);
}); // End mouseover
$("img").mouseout(function() {
//$("#popup").width(200).height(200);
$('#popup').remove();
}); // End mouseout
//------------------------------------------Reference-----------------------------------
// Get all links to point outside of the site
$('a[href^="http://"]').each(function() {
var extLink = $(this).attr('href');
$('#RecipeList').append('<li>' + extLink + '</li>');
});
//---------------------------------------END READY--------------------------------------
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>Chapter 5 Lab</header>
<div class="content">
<div class="main">
<!--------------------------------------BEGIN Mini Cookies-------------------------->
<div class="menu">
<h2>Mini Cookies</h2>
<div class="recipes">
<p>
Soft Mini Chocolate Chip Cookies – No one can resist a soft and chewy cookie, especially when it’s in mini form!
<a href="http://diethood.com/soft-mini-chocolate-chip-cookies/#QecOGKvhKY1KvAYG.99">Find Recipe Here</a>
</p>
<span class='zoom' id='ex1'>
<img src='images/miniCookies.PNG' width='100' height='100' alt='bar'/>
</span>
</div>
</div>
<!--------------------------------------END Mini Cookies-------------------------->
<!--------------------------------------BEGIN Cookie Pie-------------------------->
<div class="menu">
<h2>Cookie Pie</h2>
<div class="recipes">
<p>
There's only one thing better then cookies and that GIGANTIC cookie. Especially one's the size of pies!
<a href="http://pinchofyum.com/deep-dish-chocolate-chip-cookie-with-caramel-sea-salt">Find Recipe Here</a>
</p>
<span class='zoom' id='ex2'>
<img src='images/cookie.PNG' width='100' height='100' alt='bar'/>
</span>
</div>
</div>
<!------------------------------------END Cookie Pie--------------------------------------->
<!-------------------------------- BEGIN Peanut Butter & Jelly Bars ----------------------->
<div class="menu">
<h2>Peanut Butter & Jelly Bars</h2>
<div class="recipes">
<p>
You guys. I don’t even know what to say, other than if you make these bars you’ll want to eat every last crumb!
<a href="http://www.foodnetwork.com/recipes/ina-garten/peanut-butter-and-jelly-bars-recipe.html">Find Recipe Here</a>
</p>
<span class='zoom' id='ex3'>
<img src='images/bar.png' width='100' height='100' alt='bar'/>
</span>
</div>
</div>
<!-------------------------- END Peanut Butter & Jelly Bars ------------------------------->
<div id="references">
<h3>Links for recipes</h3>
<ul id="RecipeList">
</ul>
</div>
</div>
</div>
</div>
<footer>
<p>Made by </p>
</footer>
</div>
</body>
</html>
相关文章：
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 单击超链接时，如何使用Google Maps API v3缩放地图
- 用超链接替换URLS
- 使用JavaScript从超链接加载时的默认下拉值
- Hammer.js阻止在Android Webview中点击超链接
- 将超链接添加到“;标题“;标记文本
- 如何在我的javascript生成列表中的
- 部分中放置更多超链接
- 如何显示网页中使用的超链接列表
- 从 SharePoint 列表列获取超链接
- 如何将选定的下拉列表值附加到aspx页面本身的超链接查询字符串中
- 使选择列表中的每个选项都成为指向不同页面的超链接
- 如何在弹出窗口中的同一页面上用下拉列表中的预选选项创建超链接
- 如何在JSON上添加超链接列表项
- 使用JavaScript和jQuery获取一个超链接字段/列，将数据显示为SharePoint列表中的超链接
- 在数组中创建包含超链接项的下拉列表
- 如何根据用户输入生成修改过的超链接列表?
- Jquery/JS和CSS水平列表导航单击下拉超链接不工作
- 如何使用javascript的客户端对象模型检索sharepoint列表中的超链接数据类型列值
- 如何从JSON数组创建超链接列表
- 如何使用逻辑:迭代在 Struts 中生成超链接列表
