jquery类="；精选；在基于url路径的一部分的导航中

我有一个导航巫婆，看起来像这样：

<ul class="main-navbar">
    <li><a href="/folder1/index.php">folder1</a></li>
    <li><a href="/folder2/index.php">folder2</a></li>
    <li><a href="/folder3/index.php">folder3</a></li>       
</ul>

当我访问www.mysite.com/folder2/index.php时。该类是根据li创建的。但我也需要在我访问www.mysite.com/folder2/somethinge_else.php或www.mysite.com/folder2/subfolder/index.php时创建它。有没有办法做到这一点

无论我在folder2的哪个页面上，输出都需要：

<ul class="main-navbar">
    <li><a href="/folder1/index.php">folder1</a></li>
    <li class="selected"><a href="/folder2/index.php">folder2</a></li>
    <li><a href="/folder3/index.php">folder3</a></li>       
</ul>

如果我是folder1中的某个软件，则输出需要：

<ul class="main-navbar">
    <li class="selected"><a href="/folder1/index.php">folder1</a></li>
    <li><a href="/folder2/index.php">folder2</a></li>
    <li><a href="/folder3/index.php">folder3</a></li>       
</ul>

---

我基本上需要一个脚本来匹配url路径的第一部分和href的第一部分。（在2//）之间

也许是这样的

var url = window.location.pathname;
var url = url.split("/");
if(url[1] == "folder2"){
    $("#yourLi").addClass("selected");
}

---

根据你的描述，我建议：

$('.main-navbar a').addClass(function(){
    // caching for future use:
    var that = this,
        // retrieving the pathname, and splitting it on the '/' characters
        // to form an array (for easier removals later):
        path = that.pathname.split('/'),
        // so we're only retrieving this once per iteration over the collection:
        winPath = window.location.pathname;

    // 'len' (the number of iterations) is 'path.length - 1' because if
    // we remove the last element from the array, they will *all* match:
    for (var i = 0, len = path.length - 1; i < len; i++){

        // testing to see if there's a match at the start of the pathname:
        if (winPath.indexOf(path.join('/')) === 0) {
            // this is entirely unnecessary, and serves only to show
            // (in the demo) what was matched:
            $(this).text(function(_,oldText){
                return oldText + ' (found match at: ' + that.hostname + path.join('/') + ')';
            });

            // if the pathname, or the truncated pathname, matches we add the
            // 'selected' class-name to the element:
            return 'selected';
        }
        else {
            // otherwise we remove the last element of the array, and try again:
            path.pop();
        }
    }
});

参考资料：

• jQuery：
• JavaScript:

---

这看起来真的很棒。它似乎只是不适合我的网站。我的脚本编写不好。一点也不。但我正试图说服你。此脚本的输出位于。我需要它在父级上有一个输出。

。我给工作的代码。只是它在www.mysite.com/folder2/somethinge_else.php（例如）上不起作用。谢谢你，伙计。我在我的网站上解决了这个bug，现在它可以正常工作了。你的脚本需要在网站的底部（现在我觉得很愚蠢）。剩下2个问题：我可以将代码包装成：$（document）.ready（function（）{your code HERE}）；？问题2：如何在

中选择类。我发现将您的“return'selected'；”替换为我的“$（this）.parent（）.addClass（'selected'）；”是在

上获得它的诀窍。只是现在我看到了另一个问题：（其中一个链接是这样的：这个也被选中了。我认为最新的答案应该起作用。顺便说一下，如果这个（或任何其他）答案已经解决了你的问题，请考虑接受它作为一个解决方案。（这不是强制性的，您也不必这样做；特别是如果此答案没有回答您提出的问题）。有关更多信息，请参阅：“检查。您的更新答案dit工作正常。非常感谢。我选择您的答案作为接受的答案。我现在可以这样做，因为它现在可以工作了：）1.非常感谢你。我本想给你一支箭，但我没有足够的声誉。

$('.main-navbar a').addClass(function(){
    // caching for future use:
    var that = this,
        // retrieving the pathname, and splitting it on the '/' characters
        // to form an array (for easier removals later):
        path = that.pathname.split('/'),
        // so we're only retrieving this once per iteration over the collection:
        winPath = window.location.pathname;

    // 'len' (the number of iterations) is 'path.length - 1' because if
    // we remove the last element from the array, they will *all* match:
    for (var i = 0, len = path.length - 1; i < len; i++){

        // testing to see if there's a match at the start of the pathname:
        if (winPath.indexOf(path.join('/')) === 0) {
            // this is entirely unnecessary, and serves only to show
            // (in the demo) what was matched:
            $(this).text(function(_,oldText){
                return oldText + ' (found match at: ' + that.hostname + path.join('/') + ')';
            });

            // if the pathname, or the truncated pathname, matches we add the
            // 'selected' class-name to the element:
            return 'selected';
        }
        else {
            // otherwise we remove the last element of the array, and try again:
            path.pop();
        }
    }
});

$('.main-navbar a').addClass(function(){
    var that = this,
        path = that.pathname.split('/'),
        // retrieves the hostname, including the subdomain,
        // eg: 'subdomain.domain.tld' from the link.
        pathHost = that.hostname,
        winPath = window.location.pathname,
        // as above, but for the window.location:
        winHost = window.location.hostname;

    // if the hostname from the path is exactly equal ('===') to
    // that from the window.location then we test the pathname:
    if (winHost === pathHost) {
        for (var i = 0, len = path.length - 1; i < len; i++){
            if (winPath.indexOf(path.join('/')) === 0) {
                $(that).closest('li').addClass('selected');
            }
            else {
                path.pop();
            }
        }
    }
});