動態活動類不工作boostrap + jQuery + navbar.php

Question

對不起，提出一個問題，這個問題在過去一直被問到，但我仍然堅持，希望你能爲初學者提供見解。

我正在使用的代碼。

<script> 
$(document).ready(function() { 
    $('ul.nav > li').click(function (e) { 
     e.preventDefault(); 
     $('ul.nav > li').removeClass('active'); 
     $(this).addClass('active');     
    });    
    }); 
</script> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Brand Text</a> 
    </div> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/index.php">Home</a></li> 
     <li><a href="/one.php">One</a></li> 
     <li><a href="/two.php">Two</a></li> 
     <li><a href="/three.php">Three</a></li> 
     <li><a href="/four.php">Four</a></li> 
     <li><a href="/five.php">Five</a></li> 
    </ul> 
</div> 
</nav> 

所有這些都是我的navbar.php文件中包含在header.php文件中的內容。

我在做什麼錯？

另外;我的印象是，bootstrap的意義在於，我們不必編寫自定義的js/jquery。這種功能不應該內置於？我誤解了Bootstrap的概念嗎？

Answer 1

試試這個辦法，但每次重新載入網頁時要記住，這些設置將被刪除，整個菜單將被重置

$(document).ready(function() { 
    $('ul.nav > li').click(function (e) { 
     var $currentElement = $(this); 

     e.preventDefault(); 
     $currentElement.siblings().removeClass('active'); 
     $currentElement.addClass('active'); 
    }); 
}); 

Answer 2

您的代碼的主要故障是點擊過該鏈接時，該頁面被重定向到另一個php頁面，所以javascript click事件的效果將被覆蓋。

有此情況下兩種可能的解決方案： -

• 通過添加類主動到該頁面的相應的錨標記實現服務器端解決方案，是最簡單的解決方案

• 實現一個javascript方法，該方法讀取當前url並與anchor標記進行匹配，並將anchor標記匹配爲active。

Answer 3

這可以用默認的引導來完成看到他們documentation摘錄：

<ul class="nav nav-tabs" id="myTab" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> 
    </li> 
</ul> 

$(function() { 
    $('#myTab').tab() 
});