CSS 스프라이트로 작동하지 않는 액티브 상태

Question

클릭하면 가사 카드 탭이 계속 켜져 있는지 확인하는 데 도움이 필요합니다. 마우스를 올려 놓은 상태에서 스크린 샷을 찍었습니다. 수업이 있습니다. 커서를 가져 가면 마우스를 올리면 작동하지만 탭을 클릭하면 클래스가 작동하지 않습니다. 나는 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>

: 여기에 아주 기본적인 예제