bootstrap nav tab trigger toggle by onclick

3
votes

So I have two nav tab on the top of my page to switch between two views:

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
  <li><a data-target="#second-tab" data-toggle="tab">BAR Tab</a></li>
</ul>

<div class="tab-pane fade in active" id="first-tab"> [...] </div>
<div class="tab-pane fade in active" id="second-tab"> [...] </div>

Is there a way to toggle between the two pane other than using the tabs? So say I have a button in the first-tab div, when clicked, it will switch to the second-tab div. I want to take away the tabs complete, and use another way to trigger the switch between to pane, e.g. in an onclick function

2
twitter-bootstrap

2 Answers

4
votes
<div class="tab-content">
  <div class="tab-pane fade in active" id="first-tab">
    <a data-target="#second-tab" data-toggle="tab">BAR Tab</a>
  </div>
  <div class="tab-pane fade" id="second-tab">
    <a data-target="#first-tab" data-toggle="tab">FOO tab</a>
  </div>
</div>

Of course you can, but you made 2 mistakes:

  1. Only one div tab can have in active classes.
  2. You have to create another div with class of tab-content around tab divs.

CODEPEN

JS version:

('[data-target=#first-tab]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
$('[data-target=#second-tab]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

CODEPEN

1
votes

It's actually pretty easy, just copy and paste THE UL you used initially to toggle the tabs,then maybe take out the LI that you no longer need,bootstrap tabs won't work unless they are in a UL element with class set to nav nav-tab

Like So:

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
  <li><a data-target="#second-tab" data-toggle="tab">BAR Tab</a></li>
</ul>

<div class="tab-pane fade in active" id="first-tab"> [...] </div>
<div class="tab-pane fade in " id="second-tab"> [

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
</ul>
 </div>