设置活动链接(不带 ul 列表）

此外，每个链接都有一个不同的活动类样式（nav-01-on 表示 nav-01，nav-02-on 表示 nav-02...）。

由于您正在使用类，因此实际上不需要使用不同的类名来描述链接的"活动"状态。这就是CSS类很酷的地方。

由于您的链接已经具有唯一标识符，以您提供给它们的 id 属性的形式，因此您只需要应用通用的"活动状态"类，例如 on（可以是您想要的任何内容）。然后在你的CSS中，你可以做一些类似的事情

   .on {       /* 具有 .on 类的元素的一般规则 */   }    #tab01.on {       /* 带有 .on 类的元素 #tab01 的特定规则 */   }

我想在单击它时更改类（例如"nav-01"到"nav-01-on"）。

由于您的问题被标记为jquery我将使用 jQuery，所以这里有一个你想要的天真的解决方案。我相信你可以改进它。

//We start assuming we have no active link
var $activeLink = null;
//We apply a listener to every element with the class .nav-link, using jQuery
$('.nav-link').click(function() {
    if ($activeLink) {
        $activeLink.removeClass('on');
    } 
    //Store the link we clicked on as the active link. 
    //Notice we are wrapping it with the jQuery function,
    //so $activeLink is a jQuery object
    $activeLink = $(this);
    $activeLink.addClass('on'); 
});

这是上面的一个小提琴：https://jsfiddle.net/p1tumym9/4/

工作小提琴

为了让自己的生活更轻松，你应该做的是在单个active类之间切换，在你的 CSS 中只需指定每个链接在具有active类时的外观，而不是创建一堆独特的类（这可能很难管理）。

如何在活动链接之间切换：

$('.nav').find('a').click(function(){
  // Remove active class from all links
  $('.nav').find('a').each(function(){
    $(this).removeClass('active');
  });
  // Add active class to current link
  $(this).addClass('active');
});

在你的CSS中，只需指定每个链接在给定active类时的外观：

.nav-01.active {
  /* active styles for nav-01 */
}
.nav-02.active {
  /* active styles for nav-01 */
}
.nav-03.active {
  /* active styles for nav-01 */
}
.nav-04.active {
  /* active styles for nav-01 */
}