如何使用 javascript 更改活动引导选项卡

Question

我试图更改活动选项卡，但未能正确使用 javascript onclick 元素。这是代码：

 <ul class="nav nav-tabs" style="text-align: left;">
    <li class="active"><a href="#first" data-toggle="tab">First</a></li>
    <li><a href="#second" data-toggle="tab">Second</a></li>
    <li><a href="#third" data-toggle="tab">Third</a></li>
</ul>

<div class=“tab-content">

<div id="first" class="tab-pane fade in active">
Text

<a href="#second" class="btn btn-primary btn-lg" onclick="CHANGE ACTIVE TAB TO SECOND" data-toggle="tab">Second</a>

<a href="#third" class="btn btn-primary btn-lg" onclick="CHANGE ACTIVE TAB TO THIRD" data-toggle="tab">Third</a>

</div>

<div id="second" class="tab-pane fade in">
Text
</div>

<div id="third" class="tab-pane fade in">
Text
</div>

</div>

我如何能够使用按钮将活动选项卡更改为其关联的 ID？请指教。

祝你有美好的一天！

原文由 beamerfan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

单击按钮时，您可以触发单击所需的选项卡

<ul class="nav nav-tabs" style="text-align: left;">
    <li class="active"><a href="#first" data-toggle="tab" id="first_tab">First</a></li>
    <li><a href="#second" data-toggle="tab" id="second_tab">Second</a></li>
    <li><a href="#third" data-toggle="tab" id="third_tab">Third</a></li>
</ul>

<div class="tab-content">
    <div id="first" class="tab-pane fade in active">
        Text
        <a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
        <a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
    </div>
    ....
</div>

这是一个 演示

原文由 Aya Salama 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您也可以使用 .tab('show') 以获得更大的灵活性

https://codepen.io/jacobgoh101/pen/ALELNr

 <button class="btn btn-primary" onclick="menu3()">go to menu 3</button>

javascript:

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

引导文档： https ://getbootstrap.com/javascript/#tabs

原文由 Jacob Goh 发布，翻译遵循 CC BY-SA 3.0 许可协议