Question

我已经下载了一个JQuery插件导航栏，这个http://jpanelmenu.com/并且在我的代码中我添加了链接，这将在页面中显示一些html而不刷新整个页面。我想这样做导航栏中的每个项目，但是当我在标签内外写出相同的代码行时，外面的那个会工作，但里面的那个不会？它的链接说Test Link我在这里想知道。

 $(document).ready(function() {
   $('#loc a').click(function() {
     $('#loadPage').load('maps.html');
     return false;
   });
 });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <title>jPanelMenu | A jQuery Plugin</title>

  <script src="openFiles.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://jpanelmenu.com/js/lib/modernizr-2.6.1.min.js"></script>
  <script type="text/javascript" src="http://jpanelmenu.com/js/lib/respond.js"></script>
  <script type="text/javascript" src="http://jpanelmenu.com/js/lib/highlight.min.js"></script>
  <script type="text/javascript" src="http://jpanelmenu.com/js/lib/jquery.jpanelmenu.min.js"></script>
  <script type="text/javascript" src="http://jpanelmenu.com/js/lib/plugins.js"></script>
  <script type="text/javascript" src="http://jpanelmenu.com/js/script.js"></script>

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="main">
    <h1 class="logo"><a href="." class="ss-list">Scot Free Music</a></h1>
    <a href="#menu" class="menu-trigger ss-icon">&#xED50;</a>
    <nav>
      <ul>
        <li><a href="#">Overview</a>
        </li>
        <li><a href="#usage">Services</a>
        </li>
        <li><a href="#inner-workings">Gallery</a>
        </li>
        <li><a href="#animation">Artists</a>
        </li>
        <li><a href="#options">Testimonials</a>
        </li>
        <li><a href="#api">Contact Us</a>
        </li>
        <li><a href="#tips">Tips &amp; Examples</a>
        </li>
        <li><a href="#license">License</a>
        </li>
        <li><a href="#changelog">History</a>
        </li>
        <li><a href="#">Location</a>
        </li>
      </ul>

      <div id="loc">
        <h3><a href="#">Test Link</a></h3>
      </div>

    </nav>
    <div id="loc">
      <h3><a href="#">Test Link</a></h3>
    </div>
  </header>

  <div id="loadPage">
  </div>

  <footer class="main">
    <small>&copy; 2012 <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a></small>
  </footer>

  <script src="http://use.typekit.net/koc4rlq.js"></script>
  <script>
    try {
      Typekit.load();
    } catch (e) {}
  </script>
  <!--
        	<script type="text/javascript">
        		var _gaq = _gaq || [];
        		_gaq.push(['_setAccount', 'UA-36076455-1']);
        		_gaq.push(['_trackPageview']);
        
        		(function() {
        		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        		})();
        	</script>
        	-->

  <!--
        
        	This is a concatenated and minifed file containing all scripts necessary to run this page.
        
        	View my uncompressed script for this page at http://jpanelmenu.com/js/script.js
        
        	Other Included Files:
        
        		http://jpanelmenu.com/js/lib/modernizr-2.6.1.min.js
        		http://jpanelmenu.com/js/lib/respond.js
        		http://jpanelmenu.com/js/lib/highlight.min.js
        		http://jpanelmenu.com/js/lib/jquery-1.9.0.js
        		http://jpanelmenu.com/js/lib/jquery.jpanelmenu.min.js
        		http://jpanelmenu.com/js/lib/plugins.js
        		http://jpanelmenu.com/js/script.js
        
        	-->
  <script src="js/script.min.js"></script>
</body>

</html>

为什么Jquery可以用于导航栏外的链接而不是内部链接？

0 个答案: