CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
roberto
roberto

Reputation: 195

bootstrap nav-pills doesn't work without javascript

In bootstrap documentation they say You can activate a tab or pill navigation without writing any JavaScript. I try it like they said by simply specifying data-toggle="tab" on an element and by the href and the ID. But it doesn't work. Do i have to add something else ?

<ul class="nav nav-pills nav-stacked  col-xs-3">
  <li><a data-toggle="tab" href="one">one</a></li>
  <li><a data-toggle="tab" href="two">two</a></li>
  <li><a data-toggle="tab" href="three">three</a></li>
  <li><a data-toggle="tab" href="four">four</a></li>
</ul>
<div class="tab-content col-xs-9">
  <div id="one" class="tab-pane active">
    Germany
  </div>
  <div id="two" class="tab-pane">
    France
  </div>
  <div id="three" class="tab-pane">
    Italy
  </div>
  <div id="four" class="tab-pane">
    Spain
  </div>
</div>

Upvotes: 0

Views: 1381

Answers (2)

Eezo
Eezo

Reputation: 1771

Check Ismail Farooq answer first, if still not work then you need to check did you add both jQuery library and bootstrap.js yet. Add those two two your page, jQuery first then bootstrap one and you will be fine.

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6837

You missed # in href where you call ID for example href="#one" 

<ul class="nav nav-pills nav-stacked  col-xs-3">
  <li><a data-toggle="tab" href="#one">one</a></li>
  <li><a data-toggle="tab" href="#two">two</a></li>
  <li><a data-toggle="tab" href="#three">three</a></li>
  <li><a data-toggle="tab" href="#four">four</a></li>
</ul>
<div class="tab-content col-xs-9">
  <div id="one" class="tab-pane active">
    Germany
  </div>
  <div id="two" class="tab-pane">
    France
  </div>
  <div id="three" class="tab-pane">
    Italy
  </div>
  <div id="four" class="tab-pane">
    Spain
  </div>
</div>

live example

Upvotes: 1

Related Questions