1

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

tks来帮忙

4

2 回答 2

2

如果您确实只想使用 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 真正用来控制的东西。

希望有帮助，丹

于 2013-09-30T10:08:35.263 回答
0

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

CSS3 onclick 激活另一个 DIV 的动画

这是一个非常简单的技术，只使用“+”符号。希望你觉得这很有用。

于 2015-07-09T05:03:57.790 回答