How to create a link that actives a Bootstrap Tab

Question

I have some tabs set up in accordance with the examples here. So show/hiding divs: http://getbootstrap.com/javascript/#tabs

But I want a <button> inside all the the DIVs which acts as a NEXT button to the following tab. I tried the following which half works, but it does not deal with the updating of the active classes on the tabs at the top:

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

Can it be done?

score 2 · Answer 1 · edited May 23 '17 at 10:34

2

Using Zakaria's answer I actually figured out a better solution.

Set an ID on each tab link like so:

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

Then add an onclick event to any link:

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

edited May 23 '17 at 10:34

Community

1
1

answered Jun 08 '16 at 14:37

James Wilson

809
3
14
25

Zakaria Acharki · Answer 2 · 2016-06-08T14:10:22.940

Working fiddle

Check this basic example using data-* attributes :

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

Hope this helps.

$("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>

Taha · Answer 3 · 2016-06-08T14:22:40.163

try this code (add bootstrap.js and 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>

example of using it to move between login and (s'inscrire) :

How to create a link that actives a Bootstrap Tab

3 Answers3