1

Currently in Bootstrap 3, when you are navigating panes using Bootstrap's tabs the "active" class is placed on the <li> element like so:

<ul class="nav navbar-nav">
  <li class="active"><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>
</ul>

Instead, I am trying to get the "active" class to go on the <a> element, like so:

<ul class="nav navbar-nav">
  <li><a class="active" 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>
</ul>

I was able to add the "active" class using the Bootstrap JavaScript events to the <a> element using the below code, however I was not able to remove it from previously "active" elements, nor does it stop the "active" class from still changing on the <li> elements. Is there a simple and lightweight solution to move the default behavior from the <li> to the child <a> element?

$('a[data-toggle="tab"]').on('show.bs.tab', function(event) {
    $(event.target).addClass('active');
});
0

1 Answer 1

0

On the contrary to @Mina Ragaie comment it's important to take care of question content:

Instead, I am trying to get the "active" class to go on the element,

By default the active class follows the clicked li, but if you want to add another active class on the child anchor tag you need to change the event from 'show.bs.tab' to 'shown.bs.tab'. Add the row:

$(this).closest('.nav').find('.active').removeClass('active');

in order to remove any active added class.

In the following snippet an evidence:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(event) {
  $(this).closest('.nav').find('.active').removeClass('active');
  $(event.target).addClass('active');
}).first().trigger('shown.bs.tab');
a.active {
    background-color: blue !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<ul class="nav navbar-nav">
    <li class="active"><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>
</ul>

2
  • why you should remove active class manually while you using one of bootstrap feature, so bootstrap should remove it itself, without adding any extra events, i think we didn't solve the problem we just make it works in the wrong way, fyk if you remove ur js in your answer it will works too. check this answer stackoverflow.com/a/44195772/2311662 Feb 19, 2019 at 17:16
  • @MinaRagaie Before downvoting you need to take time to read the answer: ......I am trying to get the "active" class to go on the <a> element Different questions different answers. If you need to know why the OP asked for ..... I don't have an answer.
    – gaetanoM
    Feb 19, 2019 at 18:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.