jquery - 多页网站上的同一页面SubNav

我正在尝试更改包含在子菜单的<li>中的锚点的css。这是HTML：

<ul id="nav">
   <li class="subnav current"><a href="page1.html">Page1</a>
      <ul>
         <li><a href="page1.html#section1a">Page 1 Section A</a></li>
         <li><a href="page1.html#section1b">Page 1 Section B</a></li>
         <li><a href="page1.html#section1c">Page 1 Section C</a></li>
      </ul>
   </li>
   <li class="subnav"><a href="page2.html">Page2</a>
      <ul>
         <li><a href="page2.html#section2a">Page 2 Section A</a></li>
         <li><a href="page2.html#section2b">Page 2 Section B</a></li>
         <li><a href="page2.html#section2c">Page 2 Section C</a></li>
     </ul>
   </li>
<ul>

每个部分的宽度为1060px，左浮动，所有部分都包含在div容器中，该容器被隐藏。
这是我尝试的脚本：

$(document).ready(function() {
   var P=($(".section").position().left)*-1
   var N=(P/1060)+1
   $("#nav li.current ul li:first-child").find("a").css("color","#e53f33");
   $("#nav li.current ul li:nth-child(N)").click(function(){
      $(this).siblings().find("a").css("color","#777777");
      $(this).find("a").css("color","#e53f33");
   });
});

当我停留在同一页面上时，此脚本可以正常工作。但是，即，当我进入第1页并单击第2页上的链接时，即使我单击了另一个孩子，第一个孩子的css也已更改。我的错误在哪里？


  您可以在此处http://www.theworkingowl.com看到发生了什么。

最佳答案

对于初学者，为什么不将点击事件放在锚点上？同样，第n个子方法也不是您想要的。您是否考虑过应用/删除课程？

$(document).ready(function() {
   // take care of direct hash links...
   var relative_url = window.location.href.substr(window.location.protocol.length+window.location.hostname.length+3);
   $('a[href="'+relative_url+'"]').addClass('current').parent().siblings().find('a').css('color', '#777');

   // take care of clicks that stay on this page...
   $('#nav a').click(function() {
     $(this).parent().addClass('current').siblings().removeClass('current');
   });
});

然后是您的CSS ...

#nav a { color:#777777; }
#nav li.current a { color:#e53f33; }