Изменить цвет фона на активной вкладке

Question

Мне нужно изменить цвет фона моих вкладок при наведении, а также активным.

Мой HTML-код

    <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>

Мой код CSS

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

Цвет при наведении вкладки изменяется, но при выборе цвета вкладки остается неизменным.

Answer 1

Вам необходимо установить класс в активном элементе табуляции (Лучший способ с JS).После установки класса вы можете изменить цвет с помощью CSS:

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

Если вы хотите использовать jQuery:

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