如何在li上的twitter引導中的活動類之間切換？

我有以下的頭，將頁面之間切換：如何在li上的twitter引導中的活動類之間切換？

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-collapse collapse"> 
     <form method="post"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="active.php">Active Tags</a></li> 
      <li><a href="archived.php">Archived Tags</a></li> 
     </ul> 
     </form> 
    </div> 
    </div> 
</nav>

及以下jQuery的切換上點擊活動力：

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

頁面之間移動只能當e.preventDefault();被註釋掉，但如果沒有這條線，活動類切換將無法工作......我將不得不將href's更改爲某種類型的onclick jQuery function或php $_POST隱藏窗體在頁面之間移動，同時保持active li's之間的切換？我對javascript/html/php很陌生，因此儘可能詳細和合理地推薦和鼓勵。

來源

2015-12-15 pauld

移動e.preventDefault（）;到事件處理程序的頂部，然後嘗試。 –

我認爲e.preventDefault（）保持href鏈接完全不起作用，至少將它移到該函數的頂部不起作用。 – pauld

您可以導航包含其他鏈接嗎？或者只是這兩個。 –

是的，您是對的，e.preventDefault()只會在li上切換活動類並限制錨點以執行其操作。

雖然將其更改爲e.stopPropagation()將允許兩個操作都能夠自行執行，而無需向父處理程序通知其事件。

防止事件冒泡DOM樹，阻止任何父處理程序被通知事件。

因此，你可以把它改成：

$('.navbar li').click(function(e) { 
    e.stopPropagation(); 

    $('.navbar li.active').removeClass('active'); 
    var $this = $(this); 

    if (!$this.hasClass('active')) { 
     $this.addClass('active'); 
    } 
});

DEMO

來源

2015-12-15 06:15:00

@ bpr229，這是否解決了您的問題？ –

這允許頁面導航工作，但不幸的是默認的活動類仍然顯示。 – pauld

您的標題與您導航的網頁類似嗎？ –

如何在li上的twitter引導中的活動類之間切換？

回答

相關問題