讓CSS Sprite「按鈕」默認爲ON頁面加載狀態

Question

我是一般的CSS和網頁設計新手。 我創建了一個對應於頁面上的3個「按鈕」或「鏈接」的CSS精靈表。 這些按鈕的默認位置爲OFF，「當前」位置爲ON。
頁面加載時，所有3個按鈕默認爲OFF位置。 當您點擊其中一個按鈕時，該按鈕會變爲ON位置，讓觀衆知道屏幕上加載的內容與他們按下的按鈕相對應。 如果他們按下另一個按鈕，則加載新信息，並且該按鈕現在處於ON位置。 我希望其中的一個默認加載頁面時的ON位置。 有人可以幫我用CSS做這個嗎？ 下面是我使用的CSS：

/*--- Set Sprite Image ---*/ 
#branch0, 
#branch1, 
#branch2 
{background-image : url('images/sprite2.jpg');} 
#branch_buttons #branch0{width:300px; height:65px; background-position:0 0;} 
#branch_buttons #branch1{width:300px; height:65px; background-position:left -66px;} 
#branch_buttons #branch2{width:300px; height:65px; background-position:left -131px;} 
/* Hover/Focus State */ 
#branch_buttons #branch0:hover,#branch_buttons #branch0:focus, #branch_buttons #branch0.current{width:300px; height:65px; background-position:-301px top;} 
#branch_buttons #branch1:hover,#branch_buttons #branch1:focus, #branch_buttons #branch1.current{width:300px; height:65px; background-position:-301px -66px;} 
#branch_buttons #branch2:hover,#branch_buttons #branch2:focus, #branch_buttons #branch2.current{width:300px; height:65px; background-position:-301px -131px;} 
/* Active */ 
#branch_buttons #branch0:active{background-position:left -195px;} 
#branch_buttons #branch1:active{background-position:left -261px;} 
#branch_buttons #branch2:active{background-position:left -326px;}` 

Answer 1

您將需要一個類添加到您想要默認按鈕（可以說增加一個當前類），然後您需要添加以下樣式（假設你的懸停狀態時，該按鈕上）：

#branch_buttons #branch0:hover, 
#branch_buttons #branch0:focus, 
#branch_buttons #branch0.current {width:300px; height:65px; background-position:-301px top;} 
#branch_buttons #branch1:hover, 
#branch_buttons #branch1:focus, 
#branch_buttons #branch1.current {width:300px; height:65px; background-position:-301px -66px;} 
#branch_buttons #branch2:hover, 
#branch_buttons #branch2:focus, 
#branch_buttons #branch2.current {width:300px; height:65px; background-position:-301px -131px;} 

我想你正與風格.wayne.current沒有顯示上的按鈕你的問題？如果是這樣，這是因爲您已指定使用IDS您最初的按鈕樣式，所以他們不會被你的激活方式被覆蓋 - 理解爲什麼看看這篇文章css specificity

更新

要使用jQuery去除類很簡單。首先，你需要讓所有的按鈕，同一類 - 說button just include the following before the closing`標籤：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var buttons = $('.button'); // this is the selector for the buttons class 

     buttons.on('click', function (e) { 
      e.preventDefault(); // this line will stop the button from posting back. 

      buttons.removeClass('current'); // this removes the current class from the buttons 
      $(this).addClass('current'); // this adds the current class to the clicked buttom button 
     }); 
    }); 
</script>