css - 让 CSS Sprite "Button"在页面加载时默认为 ON 状态

Question

总体而言，我对 CSS 和网页设计不熟悉。 我创建了一个 CSS Sprite 表，对应于页面上的 3 个“按钮”或“链接”。 这些按钮的默认位置为关闭，“当前”位置为打开。
当页面加载时，所有 3 个按钮都默认处于关闭位置。 当您单击其中一个按钮时，该按钮会变为打开位置，让观众知道屏幕上加载的内容与他们按下的按钮相对应。 如果他们按下另一个按钮，则会加载新信息，并且该按钮现在处于打开位置。 我希望其中之一在页面加载时默认到 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 未显示按钮的问题？如果是这样，那是因为您已经使用 id 指定了初始按钮样式，因此它们不会被您激活的样式覆盖 - 要了解为什么请查看这篇关于 css specificity 的文章

更新

使用 jQuery 删除类非常简单。首先，您需要为所有按钮赋予相同的类 - 比如说 button 在结束` 标记之前只包含以下内容:

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