Question

我正在使用javascript来突出显示我的菜单项，但它突出显示了主页中的所有菜单项，其余页面工作正常。

我的javascript：

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

我的主菜单：

<div id="menu" class="container">
    <ul>
        <li class="current_page_item"><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>

我的旁边菜单：

<div id="sidemenu">
    <div class="section-title">
        <asp:ContentPlaceHolder ID="submenutitle" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <ul>
        <li><a href="Home.aspx" accesskey="1" title="">Home</a></li>
    </ul>    
</div>

同样，只有我的主页遇到这个问题，我认为这是因为主页的父级是〜/，这就是为什么它将current_page_item类添加到所有菜单项，包括子菜单项。所以我认为这是我的javascript在我的主页上无法正常工作。

PS。我试图从javascript中删除parent（）并且没有帮助

提前致谢。

Answer 1

您正在使用的选择器有点问题。在主页上是

$('[href$=""]')

我的意思是如果您在最后没有 Home.aspx 的情况下打开您的网站。只是域名。

表示*获取href结束为空字符串的所有元素。我想这会抓住每一个环节。

如果添加

怎么办？

if(url == "") {
   $("#menu li").removeClass("current_page_item");
}

Answer 2

你可以使用这样的小黑客：

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

并确保所有网址均以 / ：

开头

<div id="menu" class="container">
    <ul>
        <li class="current_page_item"><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>

Javascript突出显示主页中的所有菜单项

2 个答案: