如何將活動狀態類動態更改（添加）到導航鏈接

Question

嗨，我正在嘗試創建一個投資組合網站。 為了不必為每個頁面重新創建標題，我決定使用PHP include函數添加它。 我現在唯一的問題是，當我單擊鏈接導航到另一個頁面時， 活動鏈接不會分別更改。
包含的HTML

<ul id="main-menu">
     <li><a href="index.php" class="active">home</a></li>
     <li><a href="about.php">about us</a></li>
     <li><a href="portfolio.php">portfolio</a></li>
     <li><a href="contact.php">contact</a></li>
</ul>

使用Javascript：

 $(document).ready(function(){
    var $menu = $("ul#main-menu li a");                
    $menu.click(function(){
        $menu.each(function(){
            $(this).removeClass("active");
        });
        $(this).addClass("active");                  
    });
 });

我知道問題是每次頁面加載時 - 它會將活動的類重置為第一個鏈接。 我不知道的是：如何動態地將活動類添加到頁面匹配鏈接？

Answer 1

你需要這個：

  $(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        $("ul#main-menu li a[href^='"+currentPHP+"']").addClass('active');
  });

Answer 2

嘗試創建一個在頁面加載上運行的函數，該函數選擇與頁面具有相同href的超鏈接。

或者，通過AJAX加載頁面的主要內容，而不是傳統的頁面位置更改。 JQuery有一個很好的AJAX實現。 在線搜索jquery ajax 。

另一種方法是在超鏈接上創建一個cookie，並通過讀取cookie來設置所選的cookie。 雖然這將是非常不可靠的（后退按鈕，手動URL輸入等）。

Answer 3

簡單：

var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#main-menu li a.active').removeClass('active');        // remove class 'active'
$('#main-menu li a[href$="'+link+'"]').addClass('active');// and add it to a matching link

jsBin演示