0

我想更改文档加载时的活动药丸/标签。我知道您可以像下面那样设置活动药丸，但出于其他原因，我想在文档加载后更改它。我尝试了各种 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');
 });
4

2 回答 2

0

你只需要改变你的 jQuery 选择器来处理a元素而不是tab-pane div.

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

如果需要，可以在官方文档中找到有关引导选项卡的更详细说明。

于 2015-12-28T09:33:56.093 回答
0

@Stu 给你。

HTML：

myTab为 UL 元素分配一个 ID 。

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

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

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

于 2015-12-28T05:59:05.023 回答