Question

我是CSS和网页设计的新手。我创建了一个CSS精灵表，对应于页面上的3个“按钮”或“链接”。这些按钮的默认位置为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没有显示按钮的问题？如果是这样，这是因为您已使用ID指定了初始按钮样式，因此它们不会被激活的样式覆盖 - 要理解为什么要查看有关css specificity的文章

<强>更新

使用jQuery删除类非常简单。首先，您需要为所有按钮提供相同的类 - 比如button just include the following before the closing`tag：

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

在页面加载时将CSS Sprite“Button”默认设置为ON状态

1 个答案: