使用jquery导航bootstrap选项卡

问题描述：

我正在使用bootstrap选项卡。它运作良好。使用jquery导航bootstrap选项卡

<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”值*？它在URL中吗？像www.example.com＃AddExchange一样？ –

嗨Louys，我通过ViewBag（C＃）传递给剃刀页面。我把这个值放到一个隐藏的输入文件中，这样我就可以在客户端通过jQuery获取这个值。我打算通过URL传递其他场景。但无论如何，它将以相同的方式处理（通过ViewBag传递到剃须刀页面）。 - 我真的得到它的工作，并在下面发布我的答案。谢谢。 – nanonerd

答

对此，您可以使用引导方法.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/

答

在您设置要根据你的病情选择的选项卡控制器：

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

Razor视图，你抢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选项卡

相关推荐