1ページのサイトでナビゲーションを自動選択する

Question

私は1ページのWebサイトで作業しています。ユーザーがメニュー項目をスクロールまたはクリックすると、メニュー項目が強調表示されます。

私は現在しようとしている方法は次のとおりです。

<nav> 
    <div class="menu"> 
     <ul> 
      <li><a href="#about">About</a></li> 
      <li><a href="#what">What I Do</a></li> 
      <li><a href="#work">Work</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 

私はこのjQueryのをしようとしているが、CSSで.selectedをアクティブにしていないようですか？

$(function(){ 
     var path = location.pathname.substring(1); 
     if (path) 
      $('nav a[href$="' + path + '"]').attr('class', 'selected'); 
    }); 

CSS

.selected { 
    color: #f9b950; 
    font-weight: bold; 
} 

おかげ

Answer 1

location.pathnameは、ハッシュが含まれていません。代わりにlocation.hashを使用する必要があります。
また、selectedクラスを前の要素から削除することを忘れないでください。

[href="value"]セレクタは要素の正確な属性値を選択します。解決されたURIは選択されません。そのため、a[href$="#hashere"]の代わりにa[href="#hashhere"]を使用することができます。

hashchangeイベントは、#の変更を検出するために使用できます。

function doSomethingWithHash() { 
    var path = location.hash; 
    var as = $('nav a[href="' + path + '"]'); 
    if (as.length) { 
     $('.selected').removeClass('selected'); 
     as.attr('class', 'selected'); // not .addClass('selected'); //? 
    } 
} 
$(doSomethingWithHash); // = document.ready 
$(window).bind('hashchange', doSomethingWithHash); // When navigating 

これが問題を引き起こすことはありませんが、あなたはそれを考慮しなければなりません：

• .attr('class', 'selected')は以前のすべてのクラスを削除し、selectedからclassを設定します。
• .addClass('selected')は、クラス名のセット（まだ存在しない場合）にselectedを追加します。以前のクラスは削除されません。

Answer 2

liのクリックイベントの場合。

$(function(){ 
    $('.menu li').click(function(){ 
     $(this).addClass('selected').siblings().removeClass('selected'); 
    }); 
});