javascript - 如何创建激活引导选项卡的链接

Question

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

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

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

可以做到吗？

Answer 1

工作小提琴

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

使用Zakaria 的答案，我实际上找到了一个更好的解决方案。

在每个选项卡链接上设置一个 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>

Answer 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) 之间移动的示例：