Question

我使用Twitter / Bootstrap导航栏，我想动态添加“活动”类。

有一个Jquery代码应该这样做：我的问题：它添加了“活动”类，但它也是一个链接，因此页面将被重新加载，代码将失去其有效性。

$(document).ready(function() {
    $(".nav li").click(function() {
        $(this).addClass("active");
    });
});

有5个元素。单击是有效的，它添加了类，但LI中的链接不再工作，除了它应该删除活动的类，并应将其添加到新的

Answer 1

如果您的LI中有链接，请尝试此

注意：如果你重新加载，你需要一个cookie或设置哈希以记住活动链接的状态

Live Demo

$(function() {
    $(".nav li").click(function(e) {
      if (e.target.nodeName == "A") {
          e.preventDefault();
      }
      $(this).siblings().removeClass()
      $(this).addClass("active");
  });
});

使用cookie功能：

$(function() {
    $(".nav li").on("click",function(e) {
      if (e.target.nodeName == "A") {
          e.preventDefault();
      }
      $(this).siblings().removeClass()
      $(this).addClass("active");
      $.cookie("li",this.id);
  });
  var li = $.cookie("li");
  if (li) $("#"+li).addClass("active");
});

Answer 2

不要使用COOKIES。您的页面正在重新加载！

您应该只检查导航中的链接是否与当前网址相同，而不是使用Cookie来记住您点击的链接，如果它们相同，则添加活动类。

$(document).ready(function(){
  $(".nav li").each(function(){
    var href = $(this).find('a').attr('href');
    if (href === window.location.pathname) {
      $(this).addClass('active');
    }
  });
});

这将在您的页面重新加载后运行，但它会没问题！

Cookie存在的问题是，有人会点击链接，然后离开并返回，但您的Cookie会向他们显示错误活动的链接（因为Cookie存储了它!!! ）

Answer 3

尝试这一个

$("body").on("click",".nav li",function(){
        $(this).addClass("active");
});

此函数将在加载所有元素后加载

Jquery onclick，但在页面重新加载后执行操作

3 个答案: