更改文档准备好的活动选项卡

Question

我想更改文档加载时的活动 pill/tab。我知道您可以像下面那样设置活性药丸，但出于其他原因，我想在文档加载后更改它。我尝试了各种 JS，但似乎没有任何效果。这是 HTML 和 JS（我也尝试用下面的 data-toggle="tab" 替换 data-toggle="pill" 但仍然不起作用）。

<div>  
  <ul class="nav nav-pills pillstyle">
    <li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
    <li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
  </ul>
</div>  <!-- nav pills close -->

<div class="tab-content">      
  <div id="apple" class="tab-pane fade in active"> `
 .... content of tabs.

JS

$(document).ready(function(){
$('#banana').tab('show');
});

或

 $(document).ready(function(){
 $('#banana').pill('show');
 });

Answer 1

@Stu 给你。

HTML:

分配一个 ID myTab 给 UL 元素。

  <ul class="nav nav-pills pillstyle" id="myTab">

JS:

$(function () {
     $('#myTab a[href="#banana"]').tab('show');
});

另请参阅 Bootstrap 有关在此处加载时选择不同元素的文档。它会让你更好地理解。 http://getbootstrap.com/2.3.2/javascript.html#tabs

工作演示：https://jsfiddle.net/tf9k9j27/

注意：只是为了回答您的反复试验。

您只需在元素上指定 data-toggle="tab" 或 data-toggle="pill" 即可激活选项卡或药丸导航而无需编写任何 JavaScript。将 nav 和 nav-tabs 类添加到选项卡 ul 将应用 Bootstrap 选项卡样式。（来自 bootstrap 文档。阅读更多内容以获得更好的清晰度）

Answer 2

您只需更改 jQuery 选择器以寻址 a 元素而不是 tab-pane div.

$(document).ready(function(){
    $('a[href="#banana"]').tab('show');
});

如果需要，您可以在 official documentation.

中找到有关 bootstrap 选项卡的更多详细说明

更改文档准备好的活动选项卡

change active tab on document ready

twitter-bootstrap-3

tabs

nav-pills