當前頁面在aspx菜單中突出顯示

Question

我要突出顯示當前頁面。 嘗試過此代碼，但不起作用..任何幫助將不勝感激和贊賞。

$(function() {
    $("#site-menu li a").click(function() {
        $(".current").removeClass("current");
        //"this" is the element clicked on
        $(this).addClass("current");
    });
});​

<div id="menu">
     <ul id="site-menu">
          <li><a href="Home_Page.aspx">home</a></li>
          <li><a href="Services.aspx">services</a></li>
          <li><a href="About_Us.aspx">about us</a></li>
          <li><a href="Contact_Us.aspx">contact us</a></li>
     </ul>
</div>

Answer 1

我認為您應該從此開始：

$(function() {
    var curPage = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
    $("#site-menu li a[href='" + curPage + "']").addClass("current");
});​

只要改進此腳本，使其在URL中不顯示默認頁面（我認為它將是Home_Page.aspx）即可正確使用。

Answer 2

嘗試這個

$(function() {
    $("#site-menu li a").click(function(e) {
        e.preventDefault();
        $(".current").removeClass("current");
        //"this" is the element clicked on
        $(this).addClass("current");
    });
});​

還要確保CSS FIDDLE中有.current類

當我使用e.preventDefault（）;時似乎正常工作。

也許該類在回發時被渲染回默認的HTML。

Answer 3

我在這里創建了一個小提琴，顯示了一個有效的示例。

http://jsfiddle.net/psDBP/

試試這個（也請參閱我的評論）：

$(function() {
    // change to on rather than deprecated click
    $("#site-menu li a").on("click", function(e) { 
        e.preventDefault(); // stops the a href firing
        $(".current").removeClass("current");
        //"this" is the element clicked on
        $(this).addClass("current");
    });
});​

Answer 4

您也可以嘗試

    $("#site-menu li a").live('click',function() {
        $(".current").removeClass("current");
        //"this" is the element clicked on
        $(this).addClass("current");
    });

在您的$(document).ready(function(){}) ；