多个页面网站上的相同页面子导航

Question

我正在尝试更改包含在子菜单的<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。

Answer 1

首先，为什么不将点击事件放在锚点上？此外，第 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; }