Question

在我的课堂上，我为甜点制作了3个下拉菜单以及制作它们的食谱。所有的食谱都是超链接。我需要使用JavaScript来显示我在页面中使用的所有实际链接的列表。

这是一个指向页面应该是什么样子的链接（我试图让底部部分说明＆＃34;本文档引用的网站＆＃34;）

这是我到目前为止所做的代码：

＆＃13;

<!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>

＆＃13;

我不知道在哪里放置JavaScript，如果我想制作另一个div然后将JavaScript链接到它？

Answer 1

这是我的问题的解决方案：

在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>

如何显示网页中使用的超链接列表？

1 个答案: