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

我使用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>

同样，只有我的主页遇到了这个问题，我认为这是因为主页的父项是~/，这就是为什么它将当前的页面项目类添加到所有菜单项，包括子菜单项。因此，我认为是我的javascript在我的主页中无法正常工作

另外，我试图从javascript中删除parent（），但没有效果

---

提前感谢。

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

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

我的意思是如果你最后没有Home.aspx打开你的网站。只是域名

这意味着*获取href结尾为空字符串的所有元素。我想这抓住了每一个环节

如果你加上

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

---

你可以使用这样的小技巧：

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

并确保所有URL都以/开头：

<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>

谢谢，我尝试了你的建议，但它不再突出显示，而且我的html中的当前页面项目也在那里，因为无论用户选择哪个子菜单项目，当前页面都会在主菜单中突出显示，因此用户知道他在哪里。尝试

console.log（url）

查看它打印的内容。它正在打印Home.aspx所有其他页面都以xxxHome.aspx结尾，您需要重新考虑您的策略。是的，这是我的问题，尽管我的其他页面与我的主页名称不同，但它仍然包含xxxHome.aspx，出于某种原因，它也允许系统获取它的父页面。将my Home.aspx更改为Default.aspx后，一切正常，希望它是唯一的，因此Home.aspx仅为Home.aspx。谢谢你，如果你在主页上记录这个url，结果是什么？它正在打印home.aspx。发生了一些奇怪的事情。这是一个JSFIDLE，它证明了您的代码是有效的，您还有其他一些东西会弄乱选择。感谢Krasimir，发现了问题，系统也在阅读我的其他页面家长，因为他们也包含xxxHome.aspx，所以在将my Home.aspx重命名为Default.aspx后，一切都正常了。啊哈。我很高兴你发现了这个问题。