使用 jquery 导航引导选项卡答案

【问题标题】：navigate bootstrap tab using jquery使用 jquery 导航引导选项卡
【发布时间】：2017-08-13 01:36:48
【问题描述】：

我正在使用引导选项卡。它运作良好。

<ul class="nav nav-tabs">
    <li class="nav active" id="li_All"><a href="#All" data-toggle="tab">All Exchanges</a></li>
    <li class="nav" id="li_Beginner"><a href="#Beginner" data-toggle="tab">Beginner</a></li>        
    <li class="nav" id="li_AddExchange"><a href="#AddExchange" data-toggle="tab" style="color:black; font-weight:600" >ADD EXCHANGE</a></li>
</ul>

当页面打开时，有时我想为“tabActive”传递一个值，即“AddExchange”。如何导航/显示#AddExchange 选项卡而不是默认的“#All”选项卡？从概念上讲，我正在尝试使用下面的 window.location.replace，但它不起作用。

if (tabActive) {
    switch (tabActive) {
        case "Beginner":
            $("#li_All").removeClass("active");
            $("#li_Beginner").addClass("active");
            $("#li_AddExchange").removeClass("active");
            break;
        case "AddExchange":
            $("#li_All").removeClass("active");
            $("#li_Beginner").removeClass("active");
            $("#li_AddExchange").addClass("active");
            //location.href = "#AddExchange";
            window.location.replace("#AddExchange");
            break;
}

【问题讨论】：

你如何«为“tabActive”传递一个值»？是在网址里吗？喜欢 www.example.com#AddExchange 吗？
嗨 Louys，我通过 ViewBag (c#) 将它传递给剃须刀页面。我将值放入一个隐藏的输入文件中，这样我就可以在客户端通过 jQuery 获取该值。我还有其他计划通过 URL 传递它的场景。但无论如何，它将以相同的方式处理（通过 ViewBag 传递到 razor 页面）。 - 我实际上让它工作并在下面发布了我的答案。谢谢。

标签： jquery tabs navigation bootstrap-4

【解决方案1】：

您可以为此使用引导方法.tab('show')。

如何获取变量tabActive 的值取决于您。从那里您可以执行 if 语句并使用库提供的方法，如下所示：

//We will assume tabActive = 'AddExchange' here
if (tabActive !== undefined){
   //This should open the #li_AddExchange tab on page load. 
   //IF that is actually the ID of your tabs' navigation
   $('#li_'+tabActive +' a').tab('show');
}

这应该覆盖您的默认active 选项卡并选择动态选项卡。这是一个使用该方法的简单小提琴示例。请注意，显示的选项卡不是默认的活动选项卡。 https://jsfiddle.net/ommhdm4o/2/

【讨论】：

【解决方案2】：

在控制器中，您可以根据自己的条件设置要选择的选项卡：

  //some conditions
  ViewBag.SelectedTab = "li_AddExchange";

Razor View，你抓取 ViewBag 的值

 <input id="hiddenSelectedTab" type="hidden" value="@ViewBag.SelectedTab"/>

使用 javascript，您可以获得刚刚设置为隐藏输入的值，并将其用作选项卡方法的选择器。

<script>
    $().ready(function(){
       var selectedTab = $('#hiddenSelectedTab').val();
       $('#' + selectedTab + ' a:first').tab('show');
      });
</script>

要使用标签，您需要在 jquery 之后导入引导 javascript 文件。

【讨论】：