Willst du ändern den aktiven Zustand auf meiner Seite Seite Abschnitt Navar mit Flat UI Bootstrap

Question

Ich möchte meine Navigationsleiste den aktiven Zustand meiner Link ändern, wenn die Seite im Abschnitt mit diesem Link gescrollt und wenn ich auf diesen Link zu gehen, zu gehen dieser Abschnitt. Die Navigationsleiste geht auf der Seite nicht auf eine andere Seite. Ich benutze Bootstrap für diese Website.

Dies ist die 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> 

ich dieses jQuery-Code versucht, mit, aber es ändert sich die aktive Klasse, aber ich kann nicht gehen zum einen der Abschnitt, wenn ich es klicken

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

Kann jemand helfen?

Answer 1

Wenn Sie passieren eine #idname in href Attribut es für die ID in der Seite und blättert schaut nach unten/oben auf den Teil, so dass die Spitze dieses Element die oberen Rand des Fensters ist. In Ihrem Fall fehlt Ihnen möglicherweise die 'id = "section1" in Ihrem HTML. Ich bin mir nicht sicher, weil ich nur Header-Teil Ihres HTML sehen kann.

Auf klicken:

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

Die Seite, die Seite scrollen:

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

Extras: Für einen reibungslosen Übergang Scroll-Effekt, den Sie pluginChris Coyier ‚s brillanten smooth scrolling verwenden können.