Question

我在主菜单中有以下代码：

<ul class="menu-nav">
      <li id="current" class="active item53"><a href="Default.aspx"><span>
            Home</span></a></li>
      <li class="item54"><a href="onlineshop.aspx"><span>
            Shop</span></a></li>
      <li class="item28"><a href="newproducts.aspx"><span>
            New</span></a></li>
      <li class="item29"><a href="clientinfo.aspx"><span>
            Info</span></a></li>
      <li class="item18"><a href="aboutus.aspx"><span>
            About Us</span></a></li>
      <li class="item30"><a href="contactus.aspx"><span>
            Contact</span></a></li>
</ul>

现在，活动菜单始终是item53，即“主页”菜单。

我需要一个基于当前页面更改菜单按钮的代码段。

例如：如果我在contactus.aspx页面上，请将类值更改为：“活动item30”

Answer 1

您可以从location.href获取页面，并使用该更新对应的类：

let pageName = location.pathname.split("/").find(function(element) {
    if (element.indexOf(".aspx") > 0)
       return element;
});
if (typeof pathName != 'undefined') {
    $(".menu-nav li").removeClass("active");
    $("[href='"+pathName+"']").parent().addClass("active");
}

根据当前页面或URL设置菜单为活动状态

1 个答案: