Question

我根据这里的示例设置了一些标签。显示/隐藏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>

可以吗？

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

Answer 2

尝试此代码（添加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>

使用它在登录和（s＆＃39; inscrire）之间移动的示例：

Answer 3

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

如何创建激活Bootstrap选项卡的链接

3 个答案: