Question

我有以下代码尝试将一个选定的类添加到与url匹配的链接：

var pathname = window.location.pathname;

$(document).ready(function ()
{
    $('ul#ui-ajax-tabs li a').each(function()
    {
        if (pathname.indexOf($(this).attr('href')) == 0)
        {
            $(this).parents('li').addClass('selected');
        }
    });
});

1。）例如，如果我有一个类似/Organisations/Journal和/Organisations/Journal/Edit的网址，则组织和日记的链接将显示为已选中。这很好！

2。）但有时候我的网址有：/Organisations和/Organisations/Archived，如果我有一个指向已存档的链接，则会选择但是我不会希望这种情况发生，因为组织喜欢没有网址的第二部分所以不应该匹配。

任何人都可以帮助让第二种没有打破第一种类型吗？此外，没有一个可以是硬编码的正则表达式寻找关键字，因为网址有很多不同的参数！

干杯

实施例

如果网址为/Organisations/或/Organisations，则应选择包含/Organisations的链接。如果网址为/Organisations/Journal/New，则会选择包含/Organisations/Journal或/Organisations/Journal/New的链接。

但是，如果我的网址为/Organisations/Recent并且有两个链接：/Organisations和/Organisations/Recent，则只应选择第二个链接！所以这里要注意的是它必须有一个第三个参数才能更加松散地寻找URL的位而不是完全匹配。

请记住它可能并不总是组织，所以它不能硬编码到JS中！

Answer 1

为什么不使用

if($(this).attr('href') == pathname )

而不是

if (pathname.indexOf($(this).attr('href')) == 0)

Answer 2

修改：我以前的解决方案过于复杂了。更新了答案fiddle。

var pathname = window.location.pathname;

$(document).ready(function ()
{
    var best_distance = 999; // var to hold best distance so far
    var best_match = false;  // var to hold best match object

    $('ul#ui-ajax-tabs li a').each(function()
    {
        if (pathname.indexOf($(this).attr('href')) == 0)
        {
            // we know that the link is part of our path name.
            // the next line calculates how many characters the path name is longer than our link
            overlap_penalty = pathname.replace($(this).attr('href'), '').length;
            if (overlap_penalty < best_distance) { // if we found a link that has less difference in length that all previous ones ...
                best_distance = overlap_penalty; // remember the length difference
                best_match = this; // remember the link
            }
        }
    });

    if (best_match !== false)
    {
        $(best_match).closest('li').addClass('selected');
    }
});

最佳匹配的计算如下：

假设我们的路径名是“/ foo / bar / baz / x”。我们有两个问题链接：

/富/酒吧/
/富/酒吧/巴兹

这就是：

~~/ foo / bar /~~ baz / x（第一个链接的网址从路径名pathname.replace($(this).attr('href'), '')中删除）
“baz / x”是剩下的。
此余数的字符数（length）为5.这是我们对该链接的“惩罚”。
我们将5与之前的最佳距离（if (overlap_penalty < best_distance)）进行比较。 5低于（=好于）999。
我们保存this（作为<a href="/foo/bar/"> DOM对象）以供日后使用。
第二个链接的处理方式相同：
~~/ foo / bar / baz~~ / x（第二个链接的url从路径名中删除）
“/ x”是剩下的。
此余数的字符数为2.
我们将2与之前的最佳距离（为5）进行比较。 2低于5.
我们保存this（作为<a href="/foo/bar/baz"> DOM对象）以供日后使用。

最后，我们只检查是否找到了匹配的链接，如果是，请将addClass('selected')应用于距其最近的<li>父级。

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var windowLocationPathname = "/HTMLPage14.htm";  // For testing purpose.

            //Or

            //var windowLocationPathname = window.location.pathname;

            $('ul.ui-ajax-tab').find('a[href^="' + windowLocationPathname + '"]').addClass('currentPage');
        });
    </script>
    <style type="text/css">
        .ui-ajax-tab
        {
            list-style: none;
        }

        a.currentPage
        {
            color: Red;
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <ul class="ui-ajax-tab">
        <li><a href="/HTMLPage14.htm">Test 1 (/HTMLPage14.htm)</a></li>
        <li><a href="/HTMLPage15.htm">Test 2 (/HTMLPage15.htm)</a></li>
        <li><a href="/HTMLPage16.htm">Test 3 (/HTMLPage16.htm)</a></li>
        <li><a href="/HTMLPage17.htm">Test 4 (/HTMLPage17.htm)</a></li>        
    </ul>
</body>
</html>

jQuery：查找与当前URL最匹配的链接

3 个答案: