bootstrap 3 tabs not working properly

by

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

Leave a Comment