CSS3的onclick激活另一个DIV的隐藏/显示 [英] CSS3 onclick activate another DIV's hide/show

问题描述

我开始在CSS3，我试图做一个菜单是这样的：
HTTP：//$c$ccanyon.net/item /城域导航菜单/ full_screen_ preVIEW / 4573382

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

我们的想法是，当你按一下按钮，它隐藏了父分区和其他按钮打开DIV女儿。

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

我看到这个帖子的 CSS3的onclick激活另一个DIV的动漫指向这个例子 http://jsfiddle.net/kevinPHPkevin/K8Hax/ ，code：

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.

我只使用CSS3

TKS帮助

推荐答案

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

If you do want to use only css3 to do this you can use the Checkbox hack (http://css-tricks.com/the-checkbox-hack/).

这是很不理想的CSS使用但设置框，单选按钮会做相当多以及每一个停用其他。 （也就是你设置宽度：0像素在默认情况下，改变宽：200像素关于检查结合过渡：宽0.5秒; -webkit-过渡：宽0.5秒;对位动画）。

It is far from ideal css usage however setting the boxes as radio boxes will do that quite well as each one deactivates the others. (ie you set "width:0px" by default, change to "width:200px" on check combined with "transition: width 0.5s;-webkit-transition: width 0.5s;" for a bit of animation).

在所有诚实然而，您可以更好的使用jQuery / JavaScript作为该复选框黑客的回退是不理想的，这是不是东西，CSS是真正建立控制。

In all honesty however you are better using jquery/javascript as the fallbacks for the checkbox hack are not ideal and it is not the stuff that css is really built to control.

希望帮助，
丹

Hope that helps, Dan

这篇关于CSS3的onclick激活另一个DIV的隐藏/显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！