bootstrap 3 tabs not working properly

Question

I almost copied the code from their website. The tab is initiated perfectly, and when I click on tabs, new panels are activated. However, the \"active\" class is not applied

Answer 1

One more thing to check for this issue is html tag attribute id. You should check any other html tags in that page have the same id as nav tab id.

Answer 2

According to the Docs you need to put an id on each link in the header and that link needs to be inside the li which should have no other styles, i.e doesn't need all the data-target stuff in the li. Your list has with no data-toggle or id.

Your HTML would be like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
   <li><a href="#a" data-toggle="tab">a</a></li>
   <li><a href="#b" data-toggle="tab">b</a></li>
   <li><a href="#c" data-toggle="tab">c</a></li>
   <li><a href="#d" data-toggle="tab">d</a></li>
</ul>

<div class="tab-content">
   <div class="tab-pane active" id="a">AAA</div>
   <div class="tab-pane" id="b">BBB</div>
   <div class="tab-pane" id="c">CCC</div>
   <div class="tab-pane" id="d">DDD</div>
</div>

And you shouldn't need any Javascript, according to the Docs

Answer 3

For anyone struggling with this issue using bootstrap3 use the below classlist. If you've copy pasted from the DOC, It won't surely work. Becasue of the .show in new version.

<div class="tab-pane fade in active" >

<div class="tab-pane fade in" >

Answer 4

for some weird reason bootstrap tabs were not working for me until i was using href like:-

<li class="nav-item"><a class="nav-link" href="#a" data-toggle="tab">First</a></li>

but it started working as soon as i replaced href with data-target like:-

<li class="nav-item"><a class="nav-link" data-target="#a" data-toggle="tab">First</a></li>

Answer 5

In my case we were setting the div id as a number and setting the href="#123", this did not work.. adding a prefix to the id helped.

Example: This did not work-

<li> <a data-toggle="tab" href="#@i"> <li/>
...
<div class="tab-pane" id="#@i">

This worked:

<li><a data-toggle="tab" href="#prefix@i"><li/>
...
<div class="tab-pane" id="#prefix@i">

Answer 6

This will work

$(".nav-tabs a").click(function(){
     $(this).tab('show');
 });