0

<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で何が起こっているかを確認できます。

4

1 に答える 1

0

まず、クリック イベントをアンカーに配置しないのはなぜでしょうか。また、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; }
于 2011-11-15T12:53:23.453 に答える