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

I'm starting in CSS3, I'm trying to make a menu like this: http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382

The idea is when you click the button, it hides the parent div and open the div daughter with the other buttons.

I saw this post CSS3 onclick activate another DIV's animation that points to the example http://jsfiddle.net/kevinPHPkevin/K8Hax/, code:

CSS:

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

HTML:

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

that clicking on the link, it opens the div. But I want to click the link, hide the div, open the other and then do the reverse.

I would use only CSS3

tks to help

Answer 1:

如果你想只使用CSS3要做到这一点，你可以使用复选框破解（ http://css-tricks.com/the-checkbox-hack/ ）。

这是很不理想的CSS使用但设置框为单选框会做相当多以及每一个停用他人。 （即设置“宽度：0像素”默认，变更为“宽：200像素”上检查结合“过渡：宽度0.5秒; -webkit过渡：宽度0.5秒;”针对位动画）。

在所有诚实，但是你得到更好的使用jQuery / JavaScript作为该复选框黑客的回退是不理想的，它不是东西，CSS是真正建立控制。

希望帮助，丹

Answer 2:

这已经已经回答了你可以看看：

CSS3的onclick激活另一个DIV的动画

这是使用“+”符号，你only.Hope发现这很有用一个非常简单的技术。

文章来源: CSS3 onclick activate another DIV's hide/show