Question

我正在使用bootstrap Tabs。它运作良好。

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

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

Answer 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文件。

使用jquery导航bootstrap选项卡

2 个答案: