CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Suffii
Suffii

Reputation: 5784

Issue on Tabbing Bootstrap 3 Tab Using Button Click

an you please take a look at This Demo and let me know why I am not able to tab bootstrap 3 tabbs by clicking on the the buttons?

Here is the code I have:

<div class="btn-group">
    <button class="btn btn-default" id="one">1</button>
    <button class="btn btn-default" id="two">2</button>
    <button class="btn btn-default" id="three">3</button>
    <button class="btn btn-default" id="four">4</button>
</div>
<div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home">1</a> </li>
        <li><a href="#profile">2</a></li>
        <li><a href="#messages">3</a></li>
        <li><a href="#settings">4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="home">One</div>
        <div class="tab-pane" id="profile">Two</div>
        <div class="tab-pane" id="messages">Three</div>
        <div class="tab-pane" id="settings">Four</div>
    </div>
</div>
<script>
 $('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});
$("#one").on("click", function () {
      ('#myTab a:last').tab('show');
});
</script>

Thanks

Upvotes: 0

Views: 264

Answers (1)

Jaimil Prajapati
Jaimil Prajapati

Reputation: 171

Have you included jQuery, Bootstrap CSS and JS?

Edit:

Solution: You forgot the '$' sign, at the front, for jQuery.

$('#myTab a:last').tab('show');

Take a look at the following JS Bin for solution: http://jsbin.com/fenapota/2/edit?html,output

Upvotes: 1

Related Questions