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>

活动状态不使用CSS Sprite

1 个答案: