导航链接单击jQuery时切换活动类答案

【问题标题】：Switch active class when navigation links clicked jQuery导航链接单击jQuery时切换活动类
【发布时间】：2015-04-11 07:56:51
【问题描述】：

我正在尝试将 jQuery 添加到网站，因此当单击导航菜单中下一页的链接时，“活动”类将切换到“活动”或当前页面。 “活动”类最初也设置为主页。此外，它是一个使用 Bootstrap 的网站，所以我想知道是否与我的 jQuery 有冲突。看起来很简单，我的代码有点工作。它会从主页中删除活动类，并在下一个选项卡上短暂闪烁，但不会保持“活动”状态。这是 jQuery：

$(".nav li").click(function() {
    $('li').removeClass('active');
    $(this).addClass("active");

});

对我可能做错了什么有什么想法吗？提前致谢。

安德鲁

【问题讨论】：

仅供参考，您无法在浏览器的不同选项卡之间与 javascript 交互。另一个选项卡将是一个全新的页面，单独提供。所以如果你需要添加一些逻辑，在打开新链接时传递一个查询参数，以便页面代码可以区分加载时应该采取哪些操作
如上所述，一旦您离开页面，您在 dom 中操作的任何内容都会被还原。您应该使用指标，有多种方法可以做到。
感谢你们俩。我并没有意识到去一个新页面会恢复，但这在我的代码行为方式上是有道理的。再次感谢您的 JavaScript 小课！

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

我遇到了类似的问题，写了如下脚本：

var _urlpath = $(location).attr('pathname').split('/').pop();

    $('#menu > li').each(function(){
        var _this = $(this);
        var _str = _this.find('a').attr('href');
        _str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
    });

很简单：过滤url路径名，存储在变量中，然后最重要的是，当一个新页面被加载的时候，循环遍历所有的li并尝试匹配url hash（我不知道确切的术语），在 li > a's 中散列。

唉，可能有更好的方法来做到这一点。

【讨论】：

是的，这很有帮助。就像我上面所说的，我并没有意识到我去一个新页面会“重置”DOM，但现在它是有道理的。我确实考虑过使用 each() 以某种方式循环，但就获取 URL 而言，我不确定我是否会考虑这一点。感谢您抽出时间回复并提供示例代码。非常感谢！
@Andrew 没有问题！如果它解决了您的问题，请考虑接受答案！
是的，当然。我注意到的一件事是直接进入 URL 并没有在页面加载到主页时添加“活动”类，所以我必须弄清楚这一点。可能是因为我将 .htaccess 设置为直接转到 index.html 并且 javascript 正在寻找其他内容。除此之外，效果很好！