jquery - 如何在导航栏中单击时添加事件类

Question

我的页面中有一些选项卡，当我单击一个选项卡时，它会刷新页面并删除事件类。

我试过下面的代码。

$(".nav-item").on("click", function() {
    $(".nav-item").removeClass("active");
  $(this).addClass("active");
});

Answer 1

我假设 .nav-item 是一个 anchor 链接，您已为其分配了点击事件，因此页面刷新。您需要禁用其默认操作

$(".nav-item").on("click", function(e) {
  $(".nav-item").removeClass("active");
  $(this).addClass("active");
  e.preventDefault();
});

或者，你也可以这样实现

<a href="javascript:void(0)" class="nav-item"></a>

此外，如果您也希望在页面加载时选择选项卡，则需要在页面加载时调用其函数。

编辑:扩展@Bram Verstraten 的评论，您可以为链接的href 使用查询字符串，并在页面加载时设置事件类以提取它，就像这样

$(document).ready(function(){
  var $queryStirng = location.search;
  //the above fetches the query string from the URL. For e.g., ?tab2 from http://localhost?tab2

  $(".nav-item" + $queryStirng).addClass("active");
});