Javascript jQuery在用户单击时动态添加和删除类

我对以下代码有问题。我的导航中有两个选项卡选项卡1和选项卡2，当用户单击任何选项卡时，我想向其中添加活动的类，同时我想从以前的活动选项卡中删除活动的类。此外，当前处于活动状态的选项卡应显示其内容，并且必须隐藏其余内容。这意味着当用户单击任何选项卡时，它应该只显示其内容，而其他内容应该隐藏。请帮帮我谢谢你

<style>
    .wrapper .tabs {
        display: none;
    }
    .wrapper .tabs.active {
        display: block;
    }
</style>

.wrapper.tabs{
显示：无；
}
.wrapper.tabs.active{
显示：块；
}

表1内容

表2内容

$（文档）.ready（函数（）{
$（'.nav li'）。单击（函数（）{
$（'.nav li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//仅显示活动类的内容
$（'.nav li'）。单击（函数（）{
$（'.wrapper.tabs.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});

您可以使用

.eq（）

，

.index（）

在

中单击附加到选择器
的事件
“a[href^='#tab-']”“
选择
href
以
tab-
开头的元素，在
id
以
tab-
开头的位置创建变量引用元素，调用
event.prevent（）
在
中，单击
功能以防止导航到文档片段，
.hide（）
，
.show（）


$（文档）.ready（函数（）{
变量a=$（“a[href^='#tab-']）；
var tabs=$（“[id^=tab]”）；
a、 单击（功能（e）{
e、 预防默认值（）；
tabs.hide（）.eq（a.index（this））.show（）
})
})
#表1{
显示：块；
}
[id^=“tab”]：不是（#tab-1）{
显示：无；
}







表1内容

表2内容

您可以使用
.eq（）
，
.index（）
在
中单击附加到选择器
的事件
“a[href^='#tab-']”“
选择
href
以
tab-
开头的元素，在
id
以
tab-
开头的位置创建变量引用元素，调用
event.prevent（）
在
中，单击
功能以防止导航到文档片段，
.hide（）
，
.show（）


$（文档）.ready（函数（）{
变量a=$（“a[href^='#tab-']）；
var tabs=$（“[id^=tab]”）；
a、 单击（功能（e）{
e、 预防默认值（）；
tabs.hide（）.eq（a.index（this））.show（）
})
})
#表1{
显示：块；
}
[id^=“tab”]：不是（#tab-1）{
显示：无；
}







表1内容

表2内容

谢谢！我还有一个疑问，如果我有不同的href值而不是tab-1，tab-2，比如home，gallery…@e-Designary“如果我有不同的href值而不是tab-1，tab-2，比如home，gallery”会在原始问题中出现吗？原始问题中没有提供，但我的疑问是我是否有这样的导航，行吗
@e-Designary“原始问题中未提供”如果问题中未包含详细说明，如何提供答案？“但是如果我的导航是这样的，那就和我们讨论的一样了，
”
html
。@guest271314像这样，
谢谢！我还有一个疑问，如果我有不同的href值而不是tab-1，tab-2，比如home，gallery…@e-Designary“如果我有不同的href值而不是tab-1，tab-2，比如home，gallery”会在原始问题中出现吗？原始问题中没有提供，但我的疑问是我是否有这样的导航，行吗
@e-Designary“原始问题中未提供”如果问题中未包含详细说明，如何提供答案？“但是如果我有像这样的导航，
”这和问题中的
html
是一样的？@guest271314像这样，

<div class="wrapper">

    <!-- Navigation -->
    <ul class="nav">
        <li class="active"><a href="#tab-1">Tab-1</a></li>
        <li><a href="#tab-2">Tab-2</a></li>
    </ul>

    <!-- Panel-1 -->
    <div id="tab-1" class="tabs active">
        <p>Tab-1 Content</p>
    </div>

    <!-- Panel-2 -->
    <div id="tab-2" class="tabs">
        <p>Tab-2 Content</p>
    </div>

</div>

<!-- Script -->
<script>
    $(document).ready(function () {
        $('.nav li').click(function() {
            $('.nav li.active').removeClass('active');
            $(this).addClass('active');
        });

        // To display content for active class only
        $('.nav li').click(function() {
            $('.wrapper .tabs.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>