选项卡活动添加删除类在 jquery 中不起作用

Question

我有两个选项卡，我想为其添加active并删除active类。所以我尝试了下面的代码。

function EnableDisableTab() {
alert('test');            
$(".tab-pane").removeClass("active");
$(".tab-pane").addClass("active");
}

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#bulk" aria-controls="bulk" role="tab" data-toggle="tab">Bulk Upload</a></li>
<li role="presentation"><a href="#single" aria-controls="single" role="tab" data-toggle="tab">Single Update</a></li>
</ul>
			
			
<div role="tabpanel" class="tab-pane active" id="bulk">
<div class="col-md-12 text-center">
<asp:Button ID="btnSubmitUpload" runat="server" Text="Submit" CssClass="btn btn-default button" OnClick="btnSubmitUpload_Click" />
<asp:Button ID="btnCancelUpload" runat="server" Text="Cancel" CssClass="btn btn-default button" OnClick="btnCancelUpload_Click" />
</div>
</div>		
<div role="tabpanel" class="tab-pane" id="single">
<h1>This is test tab 2 </h1>
</div>				

请建议出了什么问题

Answer 1

您正在尝试在同一元素上添加和删除类。相反，尝试获取不同的 id 而不是类，因为它们是相同的。

$(".tab-pane")

这返回所有带有类".tab-pane"的元素。请改用不同的 id。

Answer 2

使用 toggleClass，因为您要同时添加和删除类 https://api.jquery.com/toggleClass/