アクティブ状態がCSSスプライトで動作しない

Question

クリックすると、Domestic Card Tabがそのように表示されるようにするための助けが必要です。私はそれがホバー上にある間、そのスクリーンショットを撮った。私はクラスを持っています：ホバリングしている間はマウスを動かしますが、クラスをクリックするとアクティブになっていません。私は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>