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

Question

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>

I don't have any, however I did add some code that one person says fixed their issue. But it doesn't seem to work for me. — Dean Coakley, Aug 22 '17 at 11:09
Agreed. Yes I am including bootstrap.js It should be noted that I'm on Bootstrap 3 — Dean Coakley, Aug 22 '17 at 11:33
Your jQuery isn't working because it's trying to remove the .active class from elements with the class dropdown-item, which you don't have in your markup. — Dan Orlovsky, Aug 22 '17 at 11:40
@DanOrlovsky very true! I Changed it to target "li.active" and it does nothing? Edit: I also don't have .nav-pills so I will try removing that now? — Dean Coakley, Aug 22 '17 at 11:51
@Deancoakley also look what elements you are subscribing to a click-event on. I believe the reason it's not still working because you're targeting elements not being clicked. I'm not in a position where I can run a test myself, I apologize. — Dan Orlovsky, Aug 22 '17 at 11:59
I'm clueless as to what I actually should be targeting in my own markup seeing as that jQuery had no markup example included. — Dean Coakley, Aug 22 '17 at 11:59
I don't get it. You don't need to write anything, it is taken care by `bootstrap.js`. [This](https://codepen.io/ksiabani/pen/PKeeqG) is the original pen with the other two examples taken out. Also `.clearfix` has nothing to do with this example. Are you missing `bootstrap.js`? Or are you missing jQuery which is a prerequisite? — Kostas Siabanis, Aug 22 '17 at 12:04
@KostasSiabanis I am importing jQuery and bootstrap.js in my in that order. I'm very confused at this point. I have `` But when I try these https://stackoverflow.com/questions/13933000/how-to-check-if-twitter-bootstrap-is-loaded I get undefined? — Dean Coakley, Aug 22 '17 at 12:18
Don't include them in ``. Include them just before the body closing tag ``. Keep your css references in `` — Kostas Siabanis, Aug 22 '17 at 12:25
@KostasSiabanis Yeah I thought that was wrong. Still, made no difference. So I can click each tab once and it seems to work. But once a tab is clicked it can never be clicked again. Because it always has the active class — Dean Coakley, Aug 22 '17 at 12:36
I am sure if you provide a demo (fiddle, code pen, etc) someone can help — Kostas Siabanis, Aug 22 '17 at 12:38
@KostasSiabanis I added a pen. Take a look if you want https://codepen.io/anon/pen/zdjawq — Dean Coakley, Aug 22 '17 at 13:02
Your problem is that you broke the expected DOM structure `ul > li`. Check your pen updated [here](https://codepen.io/ksiabani/pen/WEJyYV). A `li` element is expected after a `ul` element. — Kostas Siabanis, Aug 22 '17 at 13:13
Excellent! What a terrible mistake. So I must write my own css to make all 5 elements take up the full width. I can't use bootstrap classes? — Dean Coakley, Aug 22 '17 at 13:24
Not really, unless you use them inside `li`s, but really it's better to write your own css to style the tab header. I have provided an answer below. Thanks for accepting. Glad it helped. — Kostas Siabanis, Aug 22 '17 at 13:27
I was just able to add the existing responsive classes to LI's and remove the divs. Working perfectly! :D Thanks so much — Dean Coakley, Aug 22 '17 at 13:36

score 2 · Accepted Answer · answered Aug 22 '17 at 13:31

2

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.

answered Aug 22 '17 at 13:31

Kostas Siabanis

2,989
2
20
22

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

1 Answers1