CODEWITHSUNDEEP
twitter-bootstrap
user3682546
user3682546

Reputation:

Tabs on twitter-bootsrap not working

I am working with bootstrap tabs and jQuery, but its not working.

Markup

    <ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
  <div class="tab-pane" id="profile">.werewr..</div>
  <div class="tab-pane" id="messages">.jkhk..</div>
  <div class="tab-pane" id="settings">llkjlk...</div>
</div>

JS FILE

$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})

Here is the jsfiddle link

Upvotes: 1

Views: 60

Answers (3)

user3949783
user3949783

Reputation:

Insert following line in your markup 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Upvotes: 1

Dan
Dan

Reputation: 9468

You could adjust your js to:

$('#myTab li').click(function (e) {
    e.preventDefault();
    $('#myTab li').removeClass('active'); //remove active from all <li>
    $(this).addClass('active'); //add active class to <li> you clicked on
});

Update Fiddle

Upvotes: 0

Pete TNT
Pete TNT

Reputation: 8403

Have you included the bootstrap.js (or just the tab.js-file) that comes with Bootstrap? Your fiddle works fine with just the Bootstrap.js (even with older 2.0.2 that JsFiddle offers)

<script src="bootstrap.js"></script>

Remember to include this after jQuery

http://jsfiddle.net/8zz02ve0/

Upvotes: 1

Related Questions