如何创建激活引导选项卡的链接答案

【问题标题】：How to create a link that actives a Bootstrap Tab如何创建激活引导选项卡的链接
【发布时间】：2016-10-08 20:00:12
【问题描述】：

我根据此处的示例设置了一些选项卡。所以显示/隐藏div： http://getbootstrap.com/javascript/#tabs

但我希望在所有 DIV 中都有一个<button>，它充当下一个选项卡的 NEXT 按钮。我尝试了以下哪一半有效，但它不处理顶部选项卡上活动类的更新：

<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" href="#tab-second">Next</button>

可以吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap tabs bootstrap-tabs

【解决方案1】：

Working fiddle

使用data-* 属性检查这个基本示例：

$("button[data-tab-destination]").on('click', function() {
    var tab = $(this).data('tab-destination');
    $("#"+tab).click();
});

希望这会有所帮助。

$("button[data-tab-destination]").on('click', function() {
    var tab = $(this).data('tab-destination');
    $("#"+tab).click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="span12">
      <ul class="nav nav-tabs" id="myTabs">
        <li class="active"><a href="#one" id="tab-1" data-toggle="tab">TAB #1</a></li>
        <li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
        <li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="one">
          <button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-2">Next</button>
        </div>
        <div class="tab-pane" id="two"><button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-3">Next</button>
        </div>
        <div class="tab-pane" id="three">
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

使用Zakaria's answer 我实际上想出了一个更好的解决方案。

在每个选项卡链接上设置一个 ID，如下所示：

<li><a data-toggle="tab" href="#tab-second" id="tab-second-link">Second Tab</a></li>

然后给任意链接添加一个onclick事件：

<a class="btn btn-lg btn-primary" href="#" onclick="javascript: $('#tab-second-link').tab('show');";>Next</a>

【讨论】：

【解决方案3】：

试试这段代码（添加 bootstrap.js 和 jquery.js）

<div class="row">

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">


    //CONTENT OF TAB1
               <div style="float: left;"> 
                    <a style="margin-left:5px;" class="btn btn-set btn-default"  href="#tab2" data-toggle="tab">  MOVE TO TAB2</a>
                      </div> 


                    </div>

                    <div class="tab-pane" id="tab2">

            //CONTENT OF TAB2
                       <div style="float: left;"> 
                       <a class="btn btn-set btn-primary" href="#tab1" data-toggle="tab">MOVE TO TAB1</a></div>     

                    </div>




            </div>

使用它在 login 和 (s'inscrire) 之间移动的示例：

【讨论】：