Bootstrap 3 Tabs Not Working Properly

Bootstrap 3 Tabs Not Working

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, For example doesn’t need all the data-target stuff in the li. Your list has with no data-toggle or id.

The Toggable Tabs section on the Bootstrap website shows you only half of what you need to get it to actually work. It shows the navigation part but doesn’t add the content panes. Below you see the complete markup for a working Toggable Tabs:

Bootstrap 3 Tabs Not Working


<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">qqq</div>
   <div class="tab-pane" id="b">www</div>
   <div class="tab-pane" id="c">eeeC</div>
   <div class="tab-pane" id="d">rrr</div>
</div>

Base navigation

The base .nav component is made with flexbox and implements a strong grounds for building all kinds of navigation components. It incorporates some style overrides, some link padding for larger hit areas, and basic disabled styling.

The base .nav component does not incorporate any .active state. The examples below include the class, principally to demonstrate that this unique class does not trigger any individual styling.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Classes are used throughout, so your markup can be super flexible.

Use this code in your html Page and your Tab bar navigation is currently working.

Tags : Bootstrap 3 Tabs Not Working, using nav-pills menu

Leave a Reply

Your email address will not be published. Required fields are marked *