Как Active Tab, какая форма отправляется с помощью вкладок начальной загрузки с помощью JavaScript

Question

<ul class="nav nav-tabs staffTabs">
        <li class="active " id="tabOne"><a data-toggle="tab" href="#tab-first" @*onclick="edit(1)"*@>Reminder</a></li>
        <li class="" id="TabsTwo"><a data-toggle="tab" href="#tab-second" @*onclick="edit(2)"*@>Confirmation</a></li>
        <li class="" id="TabsThree"><a data-toggle="tab" href="#tab-third" @*onclick="edit(3)"*@>ReSchedule</a></li>
        <li class="" id="TabsFour"><a data-toggle="tab" href="#tab-four" @*onclick="edit(4)"*@>Canceling</a></li>
        <li class="" id="TabsFive"><a data-toggle="tab" href="#tab-fifth" @*onclick="edit(5)"*@>Thank You</a></li>
    </ul>

это 5 вкладок. Каждая вкладка имеет свой уникальный идентификатор. Каждая форма имеет свой собственный метод действия в контроллере. Проблема в том, что я хочу активировать вкладку, данные которой отправляются с использованием JavaScript. Потому что я отправляю идентификатор в Метод get, данные вкладки которого передаются, а затем сохраняют это значение в поле зрения, и помещаем это значение в скрытое поле, а GetElementByID теперь получает доступ к этому идентификатору в функции JavaScript. Как активировать эту вкладку, идентификатор которой у меня есть в функции JavaScript

Answer 1

Этот код может соответствовать вашим требованиям.

В действии отправки вы установили

ViewBag.ActiveTab = 2;

И обновите пользовательский интерфейс, чтобы проверить активную вкладку, чтобы сгенерировать активный класс

<ul class="nav nav-tabs staffTabs">
    <li class="@(ViewBag.ActiveTab == 1 ? "active" : string.Empty)" id="tabOne"><a data-toggle="tab" href="#tab-first" onclick="edit(1)">Reminder</a></li>
    <li class="@(ViewBag.ActiveTab == 2 ? "active" : string.Empty)" id="TabsTwo"><a data-toggle="tab" href="#tab-second" onclick="edit(2)">Confirmation</a></li>
    <li class="@(ViewBag.ActiveTab == 3 ? "active" : string.Empty)" id="TabsThree"><a data-toggle="tab" href="#tab-third" @*onclick="edit(3)"*@>ReSchedule</a></li>
    <li class="@(ViewBag.ActiveTab == 4 ? "active" : string.Empty)" id="TabsFour"><a data-toggle="tab" href="#tab-four" @*onclick="edit(4)"*@>Canceling</a></li>
    <li class="@(ViewBag.ActiveTab == 5 ? "active" : string.Empty)" id="TabsFive"><a data-toggle="tab" href="#tab-fifth" @*onclick="edit(5)"*@>Thank You</a></li>
</ul>

Answer 2

Попробуйте это

$(".nav.staffTabs>li").click(function(){
    $(".nav.staffTabs>li").removeClass("active");
    $(this).addClass("active");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-tabs staffTabs">
        <li class="active " id="tabOne"><a data-toggle="tab" href="#tab-first" @*onclick="edit(1)"*@>Reminder</a></li>
        <li class="" id="TabsTwo"><a data-toggle="tab" href="#tab-second" @*onclick="edit(2)"*@>Confirmation</a></li>
        <li class="" id="TabsThree"><a data-toggle="tab" href="#tab-third" @*onclick="edit(3)"*@>ReSchedule</a></li>
        <li class="" id="TabsFour"><a data-toggle="tab" href="#tab-four" @*onclick="edit(4)"*@>Canceling</a></li>
        <li class="" id="TabsFive"><a data-toggle="tab" href="#tab-fifth" @*onclick="edit(5)"*@>Thank You</a></li>
    </ul>