Bootstarp navbar aktive Klasse mit jquery

Question

mithilfe der folgenden Bootstrap-Navigationsleiste.

 <div class="navbar-default">    
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="Link1">Link1</a> 
       </li> 
       <li> 
        <a href="Link2">Link2</a> 
       </li> 
      </ul> 
     </div> 

unter jquery über die Links

$(document).ready(function() { 
    $('ul.nav > li').click(function (e) { 
     e.preventDefault(); 
     $('ul.nav > li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

wenn Sie den obigen Code die aktive Klasse verwenden zu aktivieren, funktioniert gut, aber die Seite nicht geladen zu werden.

bei Kommentar e.preventDefault(); Die Seite wird geladen, aber die aktive Klasse funktioniert nicht.

Answer 1

Für Ihr Problem angenommen, es gibt zwei HTML-Seiten: page1.html und page2.html. Ignorieren Sie Ihr JavaScript, wenn Sie auf einen Link auf page1.html klicken, geht es zu page2.html. Wenn Sie die Klasse active auf den entsprechenden Link in page2.html festlegen, sollte es funktionieren (setzen Sie den Link auf page2.html als aktive Verbindung).

In Ihrem JavaScript verhindert e.preventDefault() die Standardaktion. In diesem Fall wird die Weiterleitung der Webseite an den neuen Link verhindert. Selbst wenn Sie es irgendwie geschafft haben, es zu funktionieren, wenn Sie page2.html laden, wird das JavaScript, das Sie zuvor auf page1.html (Einstellung der aktiven Klasse) ausgeführt haben, nicht übertragen auf page2.html. Damit ist JavaScript nutzlos.

Einfaches Bearbeiten page2.html 's aktive Verbindung ist die Möglichkeit, es zu tun, anstatt zu versuchen, Javascript auf page1.html anzuwenden und es auf page2.html zu übertragen.