Активная вкладка добавить удалить класс в 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

Используйте toggleClass, так как вы добавляете и удаляете класс одновременно https://api.jquery.com/toggleClass/

Answer 2

Вы пытаетесь добавить и удалить класс для того же элемента. Вместо этого попробуйте получить разные идентификаторы, отличные от класса, поскольку они одинаковы.

$(".tab-pane")

Это возвращает все элементы с классом ".tab-pane". Вместо этого используйте разные идентификаторы.