使用JQuery启动Bootstrap选项卡

我有以下代码

<ul class="nav nav-tabs"> <li><a href="#aaa" data-toggle="tab">AAA</a></li> <li><a href="#bbb" data-toggle="tab">BBB</a></li> <li><a href="#ccc" data-toggle="tab">CCC</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane" id="aaa">...Content...</div> <div class="tab-pane" id="bbb">...Content...</div> <div class="tab-pane" id="ccc">...Content...</div> </div> 

和下面的脚本

 $(document).ready(function(){ activaTab('aaa'); }); function activaTab(tab){ $('.tab-pane a[href="#' + tab + '"]').tab('show'); }; 

在这种情况下，当页面准备就绪时，第二个选项卡将被激活，但是我总是在$('.tab-pane a[href="#' + tab + '"]').tab();

任何人都可以帮我吗？

Answer 1

从.nav-tabs应用select器似乎正在工作：请参阅此演示 。

 $(document).ready(function(){ activaTab('aaa'); }); function activaTab(tab){ $('.nav-tabs a[href="#' + tab + '"]').tab('show'); }; 

我更喜欢@ codedme的答案，因为如果你知道哪个标签页面加载之前，你应该改变页面的HTML，而不是使用JS这个特定的任务。

我调整了他的答案，以及演示 。

（如果这不适合你，请指定你的设置 – 浏览器，环境等）

Answer 2

虽然这个问题很老，但我做了。 当页面准备就绪时，单击链接到标签锚点

 $('a[href="' + window.location.hash + '"]').trigger('click'); 

Answer 3

 <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li> <li><a href="#bbb" data-toggle="tab">BBB</a></li> <li><a href="#ccc" data-toggle="tab">CCC</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane fade active in" id="aaa">...Content...</div> <div class="tab-pane" id="bbb">...Content...</div> <div class="tab-pane" id="ccc">...Content...</div> </div> </div> 

添加活动的类到任何li元素你想在页面加载后激活。 而且还需要在内容div中添加活动类，淡化类对于平滑过渡非常有用。

Answer 4

这个从w3schools很简单： https ： //www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

 // Select tab by name $('.nav-tabs a[href="#home"]').tab('show') // Select first tab $('.nav-tabs a:first').tab('show') // Select last tab $('.nav-tabs a:last').tab('show') // Select fourth tab (zero-based) $('.nav-tabs li:eq(3) a').tab('show') 

Answer 5

为什么不先select活动选项卡然后激活选定的选项卡内容？
1.首先将类“活动”添加到选项卡的<li>元素。
2.然后使用set'active'class来selectdiv。

  $(document).ready( function(){ SelectTab(1); //or use other method to set active class to tab ShowInitialTabContent(); }); function SelectTab(tabindex) { $('.nav-tabs li ').removeClass('active'); $('.nav-tabs li').eq(tabindex).addClass('active'); //tabindex start at 0 } function FindActiveDiv() { var DivName = $('.nav-tabs .active a').attr('href'); return DivName; } function RemoveFocusNonActive() { $('.nav-tabs a').not('.active').blur(); //to > remove :hover :focus; } function ShowInitialTabContent() { RemoveFocusNonActive(); var DivName = FindActiveDiv(); if (DivName) { $(DivName).addClass('active'); } }