CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Dean Coakley
Dean Coakley

Reputation: 1877

Bootstrap tabs issue/Jquery remove .active class on all child element

There is an issue where the active class is not being removed when you navigate to another tab. This means you can not visit the same tab more than once. https://codepen.io/anon/pen/zdjawq

A working example of tabs can be seen in example two of the following pen https://codepen.io/wizly/pen/BlKxo

<div id="exTab2" class="container">
    <ul class="nav nav-tabs">
      <div class="col-md-2">
        <li>
          <a href="#1" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li>
          <a href="#2" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li class="active">
          <a href="#3" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li>
          <a href="#4" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li>
          <a href="#5" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>

    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="1">
        test
      </div>
      <div class="tab-pane" id="2">
        cont
      </div>

      <div class="tab-pane active" id="3">
        other
      </div>

Upvotes: 1

Views: 1848

Answers (1)

Kostas Siabanis
Kostas Siabanis

Reputation: 3039

In your code you need to remove divs between ul and li elements. That is breaking the right DOM structure for tabs to work correctly.

Upvotes: 2

Related Questions