フラットUIのブートストラップを使用して、1ページセクションのナビゲーションバーでアクティブな状態を変更したい

Question

私のリンクのアクティブな状態を変更するには、そのリンクに関連付けられているセクションでページをスクロールし、そのセクション。 navbarは他のページではなくページ上のセクションに移動します。私はこのウェブサイトにブートストラップを使用しています。

これは、HTML

<header id="navbar"> 
    <div class="row" id="navbar-1"> 
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="navbar-2"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse myActlink" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#section1">Home</a></li> 
      <li><a href="#section2">Me</a></li> 
      <li><a href="#section3">Work</a></li> 
      <li><a href="#section4">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </nav> 
    </div> 
    </header> 

である私は、このjqueryのコードを使用してみましたが、それはアクティブなクラスを変更しますが、私は

$('.myActlink li').click(function(e) { 
    $('.myActlink li.active').removeClass('active'); 
    var $this = $(this); 
    if (!$this.hasClass('active')) { 
     $this.addClass('active'); 
    } 
    e.preventDefault(); 
}); 

それをクリックしたときに、私はセクションのいずれにも行くことができない

誰も助けることができますか？

Answer 1

あなたはhrefで#idnameを渡すその要素のトップは、ウィンドウの一番上になるように、それはその部分へのアップ/ダウンページやスクロールのid属性を探します。あなたの場合、あなたのHTMLに `id =" section1 "がないかもしれません。あなたのHTMLのヘッダー部分だけを見ることができるので、わかりません。クリックで

：

<div id="section1"></div> 

エクストラ：ページがにページをスクロールします

<a href="#section1"></a> 

あなたはChris Coyierの華麗なスムーズなスクロールpluginを使用することができますスムーズな移行・スクロール効果のために。