同じページ複数のページにあるSubNavウェブサイト

Question

サブメニューの<li>に含まれているアンカーのCSSを変更しようとしています。

<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コンテナに含まれています：ここではHTMLです。 ここに私が試したスクリプトは次のとおりです。私は同じページに滞在したときに

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