Change background color on active tab

Question

I need to change the background color of my tabs on hover and also active.

My HTML code

    <div class="tabs">
     <ul class="nav nav-tabs" role="tablist">
     <li><a data-toggle="tab" role="tab" href="#Tab1" name="t1">Tab1</a></li>
     <li><a data-toggle="tab" role="tab" href="#Tab2">Tab2</a></li>
     <li><a data-toggle="tab" role="tab" href="#Tab3">Tab3</a></li>
    </ul>
   <div class="tab-content">
    <div class="tab-pane fade show active" id="Tab1">
      -------------
    </div>
    <div class="tab-pane fade" id="Tab2">
       -------------
    </div>
    <div class="tab-pane fade" id="Tab3">
       ----------------
    </div>
   </div>
   </div>

My CSS Code

.tabs a:hover,.tabs a:active{
  background:#bbb;
}

On tab hover color is getting changed but on selecting the tab color remains unchanged.

Answer 1

You need to set a class on an active tab element (Best way with JS). After you set a class you can change the color via CSS:

.tabs a:hover,
.tabs a.active { background-color:#bbb; }

If you want to use jQuery:

$('.tabs a').on('click', function(){
  $('.tabs .active').removeClass('active');
  $(this).addClass('active');
});