使用 jquery 突出显示当前菜单项 asp.net答案

【问题标题】：Highlight current menu item asp.net using jquery使用 jquery 突出显示当前菜单项 asp.net
【发布时间】：2013-08-31 03:46:58
【问题描述】：

我想用 jquery 突出显示我在 asp.net 中的当前菜单项，但我不知道为什么它不起作用。这是我的代码：

Site.css：

#menu {
    background: #292929;
}
#menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}
#menu li {
    display: inline-block;
}
#menu a {
    display: block;
    padding: 0em 2em;
    line-height: 80px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 700;
    color: white;
}
#menu .current_page_item a {
    background: #01A9DC;
    color: #FFF;
}
#menu a:hover {
    text-decoration: none;
    background: #01A9DC;
    color: #FFF;
}
#menu a:active {
    background: #01A9DC;
    color: #FFF;
}

Site.Master：

<div id="menu" class="container">
    <ul>
        <li><a href="Home.aspx" accesskey="1" title="">Home</a></li>
        <li><a href="Softcare/SoftcareHome.aspx" accesskey="2" title="">Softcare</a></li>
        <li><a href="Softlearn/SoftlearnHome.aspx" accesskey="2" title="">Softlearn</a></li>
        <li><a href="Software/SoftwareHome.aspx" accesskey="2" title="">Software</a></li>
    </ul>
</div>

jQuery (1.7.1) 内 <head>:

var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);

$("menu ul li a").each(function () {
    var href = $(this).attr('href');
    if (path.substring(0, href.length) === href) {
        $(this).closest('li').addClass('current_page_item');
    }
});

我也尝试过使用 javascript，但效果也不太好，我认为 jquery 最擅长这项工作，任何建议都值得赞赏。

【问题讨论】：

你试过调试吗？它在哪里断裂？ chrome 浏览器中内置了一些很棒的客户端调试功能。只需按 f12 即可显示开发人员工具。以下是有关该工具的进一步阅读链接：developers.google.com/chrome-developer-tools
为了清楚起见，jQuery == javascript !!
@PeterVR 是的...我的意思是没有 jquery 库的 javascript

标签： javascript jquery html asp.net css

【解决方案1】：

这是我一直使用 jQuery 突出当前菜单项的完美方式

$(function () {
  var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
  $('[href$="'+url+'"]').parent().addClass("active");
});

【讨论】：

感谢 Vector，这对我的大多数页面都运行良好，但对于我的主页，它突出显示了我的所有菜单项，您知道如何解决这个问题吗？最重要的是，我有一个侧边菜单，它也可以很好地突出显示，但是有没有办法突出显示它所在的主菜单？例如，对于 url Tutor/Timeslots，Tutor 在主菜单中，Timeslots 是一个侧面菜单项，当我点击 Timeslots 时，它会突出显示 Timeslots 但不会在主菜单中突出显示 Tutor，再次感谢