單擊當前頁面上的鏈接後，保持菜單項處於活動狀態

基本上，我試圖將類active添加到當前菜單項。我成功地使用了以下jQuery代碼。單擊當前頁面上的鏈接後，保持菜單項處於活動狀態

jQuery(document).ready(function($){ 
     var path = window.location.href; 
     $('#nav-main li a').each(function() { 
      if (this.href === path) { 
       $(this).addClass('active'); 
      } 
     }); 
    });

我的導航欄上看起來是這樣的：

<ul id="nav-main"> 
     <li> 
      <a href="/">Home</a> 
     </li> 
     <li> 
      <a href="/brands">Brands</a> 
     </li> 
     <li> 
      <a href="/users">Users</a> 
     </li> 
     <li> 
      <a href="/employees">Employees</a> 
     </li> 
    </ul>

它具有以下CSS：

ul#nav-main { 
     width: 1050px; 
     margin: 0 auto; 
     color: #fff; 
    } 
    ul#nav-main li { 
     margin: 0 5px 0 5px; 
     list-style-type: none; 
     text-align: center; 
     display: inline-block; 
     font-size: 17px; 
    } 
    ul#nav-main li a { 
     padding: 0 15px; 
     line-height: 2.692307692; 
     display: inline-block; 
     text-decoration: none; 
     color: #fff; 
    } 
    ul#nav-main li a:hover { 
     background-color: rgba(0, 0, 0, 0.3); 
    } 
    ul#nav-main li a.active { 
     background-color: rgba(0, 0, 0, 0.3); 
    }

現在，當我點擊 '用戶' 我去/users和jQuery的代碼成功添加active類，以便'用戶'顯示爲導航欄中的當前菜單項。但是，當我點擊導航到例如/users/view/12345（其中12345是用戶的ID）的'用戶'頁面上的鏈接時，'用戶'頁面不再顯示爲當前菜單項目。

我認爲這與jQuery代碼僅查找nav-main li a而不是其他a的頁面上的事實有關。有什麼我可以添加到我的jQuery代碼，使其工作？

來源

2014-01-09 SomeCode

我認爲這取決於這個'if（this.href ===路徑）'當你在'/ users/view/12345'時沒有更多的身份。但我很誠實，我不完全確定，JavaScript這不是我最好的。無需等待，當然，只有當您點擊'nav-main li'中的鏈接時，您的代碼纔有效。你定義了jquery以這種方式行事。 – maurelio79

我一直在想，爲這兩個事實尋找解決方法，但無法想到或找到使其工作的東西。 – SomeCode

嘗試改變

var path = window.location.href;

這樣：

var path = "/" + window.location.pathname.split('/')[1];

pathname檢索後一切（包括）第一個斜槓。 split將根據定義的分隔符（'/'）將字符串拆分爲字符串列表，我們將選擇索引爲1的項目。

來源

2014-01-09 22:34:54 Goose

謝謝你的回覆！但是當我將它改爲你所說的時，jQuery並不會將'active'類添加到任何東西中。順便說一句，如果網站不在根目錄中，但是在子目錄中，您的代碼仍然可以工作嗎？ – SomeCode

你的控制檯是否有錯誤？路徑名將檢索域後面的所有內容，例如，如果您的站點是'http：// test.com/users/view/12345'，則我發佈的代碼將檢索'/ users'。如果您的網站進一步嵌套，則只需根據您擁有的子目錄數量指定正確的索引。例如，如果您的網站位於'http：// test.com/mywebsite/something/users/view/12345'，您將選擇索引3而不是1. – Goose

我沒有收到任何錯誤。我改變了1到3，發現我不得不改變你的一段代碼：'var path =「http://domain.com/dir_one/dir_two/」+ window.location.pathname.split（'/' ）[3];'。這解決了問題！儘管感覺有點像黑客攻擊，但每當我正在編寫的軟件正在另一個目錄中的另一臺服務器上使用時，就必須更改它。 – SomeCode

試試這個。爲我工作。在網上的某個地方找到它，但不記得來源。

var i = document.location.href.lastIndexOf("/"); 
var current = document.location.href.substr(i+1); 

    $("#nav-main a").removeClass('active'); 

    $("#nav-main a[href^='"+current+"']").each(function(){ 
     $(this).addClass('active'); 
    });

來源

2014-01-09 23:05:44 user3179712

我喜歡這個想法，但它在這種情況下不起作用。我將保存代碼，以便在需要時使用它。謝謝！ – SomeCode

單擊當前頁面上的鏈接後，保持菜單項處於活動狀態

回答

相關問題