選項卡活動添加刪除 jquery 中的 class 不起作用

Question

我有兩個選項卡，我想為其添加active選項卡並刪除active選項卡 class。 所以我嘗試了下面的代碼。

 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

您正在嘗試在同一元素上添加和刪除 class。 而是嘗試獲取不同的 ID，而不是 class，因為它們是相同的。

$(".tab-pane")

這是用 class ".tab-pane" 返回所有元素。 改用不同的 id。

Answer 2

使用toggleClass，因為您同時添加和刪除class https://api.jquery.com/toggleClass/