比较 URL 和链接答案

【问题标题】：Comparing URL to links比较 URL 和链接
【发布时间】：2011-05-25 13:52:13
【问题描述】：

我有以下 HTML：

<ul class="vertical_menu no_select">
    <li class="edge_top">&nbsp;</li>
    <!-- Menu Items Here     -->
    <li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
    <li class="not_selected"><a class="selection_link" href="index.htm">Subitem 1</a></li>
    <li class="not_selected"><a class="selection_link" href="index.htm">Subitem 2</a></li>
    <!-- Menu Items End Here -->
    <li class="edge_bottom">&nbsp;</li>
</ul>

现在，如果当前 url 与锚标记内的 href 值匹配，则带有 "selection_link" 类的链接需要具有 li 元素（它们的父元素）才能拥有一个新类 "selected" .我可以获得完整的 URL，但我不知道如何使用它来帮助查看，因为在不同的目录级别可能有多个具有相同名称的页面。

感谢您的帮助！我正在使用 jQuery，所以请随时为我提供 jQuery 示例！

【问题讨论】：

标签： javascript jquery css element

【解决方案1】：

Check out the jsFiddle. This should do the trick:

$("ul.vertical_menu li a").each(function() {

    if (this.href == window.location.href) {
        $(this).parent().toggleClass("not_selected selected");
    }

});

【讨论】：

【解决方案2】：

$('.selection_link').each(function() {
    if($(this).attr('href') === window.location.pathName.substring(1)) {
        $(this).parent().attr("class", "selected");
    }
});

未经测试，但它应该会让你开始。子字符串是因为路径名以'/'开头，你也可以把它放在你的href中

【讨论】：

【解决方案3】：

或者这个……

$('.vertical_menu a').each(function() {
    if (location.href.search(this.attr('href')) != -1) {
        $(this).parent().addClass('selected');
    }
});

【讨论】：