Активное состояние, не работающее с CSS Sprite

Question

Мне нужна помощь в том, чтобы убедиться, что вкладка «Внутренняя карта» остается такой, когда нажимается. Я взял этот снимок экрана, пока он был на ходу. У меня есть класс: наведите указатель мыши, пока он включен, но класс: active не работает, когда нажимается вкладка. Я новичок в CSS, пожалуйста. Скриншот/Код ниже

https://www.dropbox.com/s/ahj6ljk25cy48b9/Screenshot%202016-10-10%2014.04.53.png?dl=0

<style type="text/css" media="screen"> 
          #test { 
          display: block; width: 100%; height: 67px; 
          background: url(images/domestic-main.png) 
          no-repeat; 
          border-left: 1px solid #747474; 
          border-right: 1px solid #747474;} 

         #test:hover{ 
          background-position: -208px 0%; 
          position: relative; 
          border-right: none; 
          border-top: none; 
          border-bottom: none; 
          width: 120%; 
          color: white;} 

         #test.a:hover { 
          color: white;} 

         #test a:active { 
          background-position: -208px 0%; 
          position: relative; 
          border-right: none; 
          border-top: none; 
          border-bottom: none; 
          color: white;} 

         #test:active{ 
          background-position: 50px 0%; 
          position: relative;} 

         #test:current{ 
          background-position: -100px 0%; 
          position: relative;} 

         </style> 
         <li class="" > 
         <a href="#domestic-card-tab" id="test"><p     
         style="width=100%;" id="current"> 
         Domestic Card Payment</p></a> 
         </li> 

Answer 1

:active не волшебно работать для вкладок. Он работает только для ссылок/якорей и других собственных элементов. Вам нужно добавить класс, например .active, на активную вкладку, когда она нажата. Вот очень простой пример:

$('.tab').click(function() { 
 
    $('.tab').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="tab">Tab1</div> 
 
<div class="tab">Tab2</div> 
 
<div class="tab">Tab3</div>