CSS3 onclick 激活另一个 DIV 的隐藏/显示

Question

我从 CSS3 开始，我正在尝试制作这样的菜单: http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382

想法是，当您单击按钮时，它会隐藏父 div 并使用其他按钮打开子 div。

我看到了这个帖子 CSS3 onclick activate another DIV's animation指向示例 http://jsfiddle.net/kevinPHPkevin/K8Hax/ , 代码:

CSS:

#box1 {
    display:none;
}
#box1:target {
    display:block;
}

HTML:

<a href="#box1">Click Me</a>
<div id="box1">test test</div>

点击链接，它会打开 div。但我想单击链接，隐藏 div，打开另一个，然后执行相反的操作。

我只会使用 CSS3

感谢帮助

Answer 1

如果您只想使用 css3 来执行此操作，您可以使用 Checkbox hack ( http://css-tricks.com/the-checkbox-hack/ )。

这远非理想的 css 使用，但是将框设置为单选框会做得很好，因为每个框都会停用其他框。 (即默认情况下设置“width:0px”，检查时更改为“width:200px”并结合“transition:width 0.5s;-webkit-transition:width 0.5s;”以获得一些动画)。

老实说，您最好使用 jquery/javascript，因为复选框 hack 的后备方案并不理想，而且它不是 css 真正用来控制的东西。

希望对你有帮助，丹