Question

我想更改文档加载时的活动药丸/标签。我知道你可以像我下面那样设置活性药丸，但由于其他原因我想在文件加载后更改它。我已经尝试了各种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：

为UL元素分配ID myTab。

  <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 docs。阅读更多内容以获得更好的清晰度）

Answer 2

您只需要更改jQuery选择器以处理a元素而不是tab-pane div。

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

如果需要，您可以在official documentation中找到有关引导标签的更多详细说明。

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

2 个答案: