CODEWITHSUNDEEP
jqueryhtml
moses
moses

Reputation: 155

Activate tab after click on a button

I want to activate a tab after a click on a button. When I click on the button , the tab pane "bbb" should be the activate one. 

<ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
     <div class="tab-pane active" id="aaa">
          <div>
             <button type="submit" class="btn btn-primary" aria-label="Left Align" onclick="activateTab('bbb')" name="activateUser">
                                    Change active tab
              </button>
          </div>
    </div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

function activateTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

Here is an example, that doesn't work.

http://jsfiddle.net/z76sy86z/

Upvotes: 1

Views: 2461

Answers (2)

Salah Nour ElDin
Salah Nour ElDin

Reputation: 508

don't separate function from html set all together into html like the following 

<script type="text/javascript">
function activateTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};</script>
<ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane active" id="aaa">
                                <div>
                                    <button type="submit" class="btn btn-primary" aria-label="Left Align" onclick="activateTab('bbb')" name="activateUser">
                                        Change active tab
                                    </button>
                                </div>
                           </div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

Upvotes: 1

kurt_vonnegut
kurt_vonnegut

Reputation: 192

The function activateTab() is onload function as default option on jsfiddle. It is not on global scope.

You can use Load Type to No wrap from options or easier to do:

window.activateTab = function(tab) {  
   $('.nav-tabs a[href="#' + tab + '"]').tab('show'); 
}

Upvotes: 1

Related Questions