JQuery多功能

Question

我是JQuery的新手，我觉得我已经很好地掌握了代码，然而，我现在正在做的事情让我有点困惑……

jQuery(document).ready(function($) {
var tab01 = "a[href*=#web-traffic]";
var tab02 = "a[href*=#customer]";
var tab03 = "a[href*=#value]";
var tab04 = "a[href*=#fourth]";
var allTabs = '#approach .approach-tabs a';

var content01 = "#web-traffic";
var content02 = "#customer";
var content03 = "#value";
var content04 = "#fourth";


$(tab01).addClass('active');
$(content01).show();

$(tab01).on('click', function() {
    $(this).addClass('active');
    $(allTabs).removeClass('active');
});

$(tab02).on('click', function() {
    $(this).addClass('active');
    $(allTabs).removeClass('active');
});

$(tab03).on('click', function() {
    $(this).addClass('active');
    $(allTabs).removeClass('active');
});

$(tab04).on('click', function() {
    $(this).addClass('active');
    $(allTabs).removeClass('active');
});
});

当一个链接(var tab##)被点击时，我想添加一个类，'active‘，并从同一元素中的所有其他链接中删除。

任何帮助都将不胜感激。谢谢!

Answer 1

您可以从所有选项卡中删除active类，然后将该类添加回单击的选项卡选择器中：

$(tab01).on('click', function() {
    $(allTabs).removeClass('active');
    $(this).addClass('active');
});