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>

每个部分的宽度为1060像素，左浮动，所有部分都包含在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

对于初学者，为什么不将点击事件放在锚点上？而且，nth-child方法不是你想要的。您是否考虑过应用/删除课程？

$(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; }

多页网站上的同一页SubNav

1 个答案: