让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>