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

【问题标题】：How to change active bootstrap tab with javascript如何使用 javascript 更改活动引导选项卡
【发布时间】：2017-01-20 12:38:15
【问题描述】：

我尝试更改活动选项卡，但未能正确使用 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？请指教。

祝你有美好的一天！

【问题讨论】：

你的引用有点奇怪。使用标准的"。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

您也可以使用.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

【讨论】：

不知道为什么，但tab('show') 只更改了我的活动选项卡，而不是详细信息窗格。
目前（2020 年 2 月）仍可接受的解决方案应该是 Aya Salama 的 stackoverflow.com/a/39461471/2979069 tab('show') 并不总是有效

【解决方案2】：

您可以在点击按钮时触发您想要的标签的点击

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

这是Demo

【讨论】：

天才！为我节省了很多时间和精力！

【解决方案3】：

我推荐数据属性方法，是一种干净的解决方案，并且将视图与控制器代码分开

<a href="#btn-next"data-next="#tab1" class="btn btn-primary">go to menu 1</a>
<a href="#btn-next"data-next="#tab2" class="btn btn-primary">go to menu 2</a>

javascript：

$('a[href="#btn-next"]').on('click', function(event){
  event.preventDefault();
  var tab = $(this).data('next'); 
  $(tab).tab('show');
})

【讨论】：

【解决方案4】：

这是你的 js

$('#submit').click(function (e) {
    $('#myTab a[href=#tabs3-2k_tab2]').tab('show')
    e.preventDefault()
});

【讨论】：

使用属性查询时，通常最好引用$('#myTab a[href="#tabs3-2k_tab2"]') 之类的属性 - 这样可以防止任何特殊字符导致选择器出错或引发警告。

【解决方案5】：

在 bootstrap5 上更新

<div class="tab-control" data-role="tab-control">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div class="frames">
        <div class="frame" id="tab1">
            //Content tab 1
        </div>
        <div class="frame" id="tab2">
            //Content tab 2
        </div>
    </div>
</div>



var someTabTriggerEl = document.querySelector('#tab1');
    var tab = new bootstrap.Tab(someTabTriggerEl);
    tab.show();

【讨论】：

【解决方案6】：

工作示例

jQuery(document).ready(function ($) {
        $('#tabs').tab();
});

$('button').addClass('btn-primary').text('Switch to Orange Tab');
$('button').click(function(){
      $('#tabs a[href=#orange]').tab('show');
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
 <center><h6>Switching Among the Tabs</h6></center>
 <div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a>  </li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
            <button>Blue</button>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
            <button>Blue</button>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
            <button>Blue</button>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
            <button>Blue</button>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
            <button>Blue</button>
        </div>
    </div>
 </div>
</div>

【讨论】：

【解决方案7】：

我推荐了这个代码。

<div class="tab-control" data-role="tab-control">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div class="frames">
        <div class="frame" id="tab1">
            //Content tab 1
        </div>
        <div class="frame" id="tab2">
            //Content tab 2
        </div>
    </div>
</div>

在类属性中添加你想要的效果。

【讨论】：