活動狀態不能使用CSS Sprite

Question

我需要幫助確保國內卡片標籤在點擊時保持這種狀態。我在懸停時拍攝了截圖。我有這個類：在懸停時懸停工作，但當點擊選項卡時class：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>