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");
});

只是改进此脚本才能正常使用默认页面（我认为它将是Home_Page.aspx），当它没有出现在URL中时。

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中有 .current 类 FIDDLE

当我使用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(){})内;

当前页面突出显示在aspx中的菜单中

4 个答案: