twitter bootstrap 3 tab view

Question

I want to have tab view using twitter bootstrap 3:

http://jsfiddle.net/K9LpL/2/

<ul class="nav nav-tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
      </div>
      <div class="tab-pane" id="profile">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
      </div>
      <div class="tab-pane" id="messages">
      </div>
      <div class="tab-pane" id="settings"></div>
    </div>    

This code does not work to me. Most of examples on net are not with 3rd version. It would be great if anybody tell me what my problem is or even if giving me a standard working example(with bootstrap 3).

Answer 1

You forgot the data-toggle attribute on your links.

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
  <li><a href="#profile" data-toggle="pill">Profile</a></li>
   <li><a href="#messages" data-toggle="pill">Messages</a></li>
</ul>

Fiddle: http://jsfiddle.net/jofrysutanto/K9LpL/3/

This is actually in Bootstrap 3.0 documentation as well: http://getbootstrap.com/javascript/#tabs

Update

As described in comment, data-toggle="pill" and data-toggle="tab" can be used interchangeably depends on the style you're after.

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

Answer 2

You can activate tab using data-toggle without js or with js as shown below. For more info see this documentation.

See this Fiddle Add id myTab to ul and run this below js

JS

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