使用 jQuery 导航引导选项卡

Question

我正在使用引导选项卡。效果很好。

<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.place，但它不起作用。

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，您可以获得刚刚设置为隐藏输入的值，并将其用作 tab 方法的选择器。

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

要使用选项卡，您需要在jquery之后导入引导javascript文件。