如何通过 JavaScript 使用引导选项卡来激活选项卡提交的表单答案

【问题标题】：How to Active Tab which form is submit using bootstrap tabs by JavaScript如何通过 JavaScript 使用引导选项卡来激活选项卡提交的表单
【发布时间】：2019-08-03 20:30:45
【问题描述】：

<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 个选项卡。每个选项卡都有自己唯一的 ID。每个表单在控制器中都有自己的操作方法。问题是，我想激活使用 JavaScript 提交数据的选项卡。因为我将 id 发送到获取提交哪个选项卡数据的方法，然后将该值存储在视图中请求并将该值放在隐藏字段中，并通过 GetElementByID 访问 JavaScript 函数中的 id 现在我如何激活我在 JavaScript 函数中拥有的 id 的那个选项卡

【问题讨论】：

标签： javascript asp.net asp.net-mvc

【解决方案1】：

试试这个

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

【讨论】：

点击评论。提交表单后，我通过硬代码发送 id，如 tab1 的 0，tab2 的 1 以获取方法并将该 id 存储在 view beg 并将 View beg 值存储在隐藏字段中，然后我编写一个 JavaScript 函数并访问隐藏字段JavaScript 函数中的值具有 id，但现在我必须激活我拥有的 ID 的选项卡
我明白了，我们也可以使用 viewbag 检查您的答案。谢谢
其实我是这么想的，因为他也在href="#<tabl-number>"这里通过hash做所有事情

【解决方案2】：

此代码可能符合您的要求。

在您设置的提交操作中

ViewBag.ActiveTab = 2;

并更新 UI 以检查活动选项卡以生成活动类

<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>

【讨论】：