How to Active Tab which form is submit using bootstrap tabs by 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>

these are the 5 tabs .Each tabs has its own unique ID.Each form has its own action method in controller.The problem is,i want to active that tab which data is submit using JavaScript.Because i am sending id to get method which tab data is submit and then store that value in view beg and put that value in hidden field and accesses that id in JavaScript function by GetElementByID now how i active that tab which the id i have in JavaScript function

Answer 1

This code may be suite with your requirement.

In submit action you set

ViewBag.ActiveTab = 2;

And update UI to check active tab to generate class active

<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

Try this

 $(".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>