如何创建一个活动引导标签的链接

-1

我有一些按照这里的例子设置的标签。因此，显示/隐藏divs： http://getbootstrap.com/javascript/#tabs 如何创建一个活动引导标签的链接

但我想要一个<button>所有的DIVs作为一个NEXT按钮到下面的选项卡。我尝试了以下这一半的工作，但它并不涉及顶部选项卡上活动类的更新：

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

可以这样做吗？

来源

2016-06-08 James Wilson

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>

来源

2016-06-08 13:57:45

尝试这个代码（添加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'inscrire）：

来源

2016-06-08 14:07:00 Taha

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

来源

2016-06-08 14:37:37

如何创建一个活动引导标签的链接

回答

相关问题