JavaScript 根据当前 URL 添加类答案

【问题标题】：JavaScript add class depending on current URLJavaScript 根据当前 URL 添加类
【发布时间】：2012-01-01 09:55:12
【问题描述】：

对于我的网站导航，我需要将“活动”类添加到 li 元素，具体取决于它是否与当前 URL 匹配。

导航 HTML：

<ul id="nav">
    <div id="wrapper">
        <li><a href="/">Home</a></li>
        <li><a href="/tagged/Review">Reviews</a></li>
        <li><a href="/tagged/First_Look">First Looks</a></li>
        <li><a href="/tagged/Commentary">Commentaries</a></li>
        <li><a href="/tagged/Walkthrough">Walkthroughs</a></li>
        <li><a href="/tagged/Achievement">Achievements</a></li>
    </div>
</ul>

【问题讨论】：

你是在使用任何 javascript 库还是只是 vanilla js？
我不完全确定。你能解释一下吗？
“JavaScript 库”的意思是 jQuery、Prototype、Dojo、MooTools、YUI、RightJS 等...
我想我可能有 jQuery，但不完全确定。
尝试运行此代码：alert($().jquery) - 如果您收到一个带有诸如“1.5.2”之类的值的消息框，则说明您正在运行 jquery。

标签： javascript css url

【解决方案1】：

如果你想使用“纯”（“vanilla”）JavaScript，请使用以下代码（假设<ul id="nav">存在）：

window.onload = function() { 
    var all_links = document.getElementById("nav").getElementsByTagName("a"),
        i=0, len=all_links.length,
        full_path = location.href.split('#')[0]; //Ignore hashes?

    // Loop through each link.
    for(; i<len; i++) {
        if(all_links[i].href.split("#")[0] == full_path) {
            all_links[i].className += " active";
        }
    }
}

使用 jQuery：

$(document).ready(function(){
    var full_path = location.href.split("#")[0];
    $("#nav a").each(function(){
        var $this = $(this);
        if($this.prop("href").split("#")[0] == full_path) {
            $this.addClass("active");
        }
    });
});

【讨论】：

只是一个简短的说明 - 这只有在链接的 href 是完整路径即 example.com/tagged/Review 时才有效。 if(all_links[i].href.split('#')[0].substr(-1 * full_path.length) == full_path) 将只匹配相对 url。
@AdamHutchinson 实际上，不是。我正在使用href 属性（jQuery：.prop("href")，它返回解析后的路径。因此，如果http://so.com/dir/file 处的链接包含href="../bar"，则该链接将被解释为http://so.com/bar。
这按原样工作，但是它自己将其应用于 a 元素而不是 li 元素。
啊，我假设 .href 会返回链接的实际 'href' 属性。我应该在做出这个假设之前测试它！忽略我之前的评论 OP。
@KristianMatthews - 只需使用all_links[i].parentNode.className += 'active'

【解决方案2】：

我认为，在这种情况下，最好在服务器端进行更改。

使用 javascript 你可以做到：

var target = 0;
switch( window.location.pathname )
{
    case "/tagged/Review":
        target = 1;
        break;

    case "/tagged/First_Look":
        target = 2;
        break;
    /* add other cases */
}

document.getElementById("nav").getElementByTagName("li")[target].classList.add("active");

将代码放在加载的 DOM 之后。

如果是jquery，可以使用：

var target = 0;
switch( window.location.pathname )
{
    case "/tagged/Review":
        target = 1;
        break;

    case "/tagged/First_Look":
        target = 2;
        break;
    /* add other cases */
}

$($("#nav li")[target]).addClass("active");

编辑

window.onload 或 $.ready 是了解文档是否已加载的方法。

【讨论】：

这可行，但似乎是一种非常冗长的方法，因为每当菜单更改时，您都必须更改 javascript。
我对 DOM 不是很熟悉，如果你能向我解释一下那就太好了，谢谢。