如何在导航栏中单击添加活动类

Question

页面上有一些选项卡，当我单击某个选项卡时，它会刷新页面并删除活动的班级。

我尝试了以下代码。

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

Answer 1

我将假设.nav-item是为其分配了click事件的锚链接，因此页面刷新了。您需要禁用其默认操作

$(".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");
});