CODEWITHSUNDEEP
jquerytwitter-bootstrap
whitebear
whitebear

Reputation: 12461

Control active tab on bootstrap

I made tabs on bootstrap.

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li><a href="#menu23" data-toggle="tab">Beethoven</a></li>
        <li><a href="#menu24" data-toggle="tab">Bach</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane" id="menu23">
            item1
        </div>
        <div class="tab-pane" id="menu24">
            item2
        </div>
    </div>

I want to activate item1 or item2 by button or some action.

How can I make it ?

Upvotes: 4

Views: 3965

Answers (2)

Konstig
Konstig

Reputation: 135

You can use $(selector).tab('show'); bootstrap writes about it in the documentation http://getbootstrap.com/javascript/. Check my exemple here.

Update:

If you want it more dynamic where you create your buttons auto. Example here

$(document).ready(function() {
  $.each($("#tabs li a"), function(key, elm){
    $("#buttons").append(
      $("<a/>")
        .text($(elm).text())
        .addClass("btn")
        .click(function() {
          $(elm).tab('show');
        })
    );
  });
});

Upvotes: 1

Mike Ramsey
Mike Ramsey

Reputation: 843

using bootstrap buttons to navigate next | Prev

<div class="btn-group">
    <button class="btn" id="prevtab" type="button">Prev</button>
    <button class="btn" id="nexttab" type="button">Next</button>
</div>

then in your javascript just add

var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
    $tabs.filter('.active')
         .prev('li')
         .find('a[data-toggle="tab"]')
         .tab('show');
});

$('#nexttab').on('click', function() {
    $tabs.filter('.active')
         .next('li')
         .find('a[data-toggle="tab"]')
         .tab('show');
});

Upvotes: 5

Related Questions