保持菜單項突出

我有一個菜單：http://jsfiddle.net/hu5x3hL1/1/保持菜單項突出

HTML

<ul id="menu" class="sidebar"> 
<li> <a href="#" class="clickme">Menu</a> 
    <ul id="menu1"> 
     <li><a class="dropdown-class-name" href="#">Dropdown link1</a></li> 
     <li><a class="dropdown-class-name" href="#">Dropdown link2</a></li> 
    </ul> 
</li>

jQuery的

$('#menu1 li a').click(function(e) { 
    $('a').removeClass('dropdown-class-name active'); 
    $(this).addClass('dropdown-class-name active'); 
});

CSS

#menu1 li a.active{ 
    font-weight:bold; 
}

活動菜單項以粗體突出顯示。但在我的網站上點擊某個下拉鍊接時，新頁面打開，但活動菜單項已不是粗體。如何在網站的新頁面上以粗體突出顯示？

我試着這樣做：

$(document).ready(function() { 
     var url = window.location.href; 
     $("#menu1 li a").click(function() { 
      if (url == (this.href)) { 
       $('a').removeClass('dropdown-class-name active'); 
       $(this).addClass('dropdown-class-name active'); 
      } 
     }); 
    });

我認爲這是正確的想法，但如果可以的錯誤？

來源

2014-10-11 Mia

您必須刪除'$（「＃menu1 li a」）。click（）'事件。這段代碼必須在文檔加載時運行，而不是單擊按鈕。 – emmanuel 2014-10-11 17:27:44

我也嘗試使用'each'而不是'click'，但結果是一樣的 – Mia 2014-10-11 17:35:30

請嘗試** ** url **和** this.href **的alert（）**以確保比賽。 – emmanuel 2014-10-11 17:36:37

問題是，當您單擊鏈接時，它會導致菜單重新加載並丟失活動鏈接的狀態。您將菜單項設置爲舊頁面上的活動狀態，然後瀏覽器會將頁面移至新頁面，此時頁面不再活動，因爲HTML會再次加載，並且菜單項上沒有任何活動類別設置。

您需要做的是在頁面加載時使用Javascript函數來檢查哪個菜單項對應於當前URL並將該項設置爲活動狀態。因此，它會在鏈接被關注後設置活動類&新頁面已加載，您將在新頁面上真正看到它。

$(document).ready(function() { 
    var url = window.location 

    var menuItem = $('#menu1 li a').filter(function() { 
    return this.href == url; 
    }) 

    menuItem.addClass('active'); 
})

來源

2014-10-11 17:37:55 t0mppa

我理解了這個想法，但是你的代碼的結果是一樣的 – Mia 2014-10-11 17:51:00

在沒有更多提示的情況下提供更多幫助有點困難。在你的問題中，所有的鏈接共享相同的URL，因此當通過URL比較鏈接時，這是一種全部或者全部的情況。 – t0mppa 2014-10-12 17:46:26

當我使用這個代碼時，我有2個問題：1）'this.href'的警報返回'undefined' 2）如果我使用一些鏈接而不是'this.href'，在網站的新頁面上所有菜單項大膽 – Mia 2014-10-12 19:53:42

保持菜單項突出

回答

相關問題