说我有包含独特的内容可以显示三个div的;
- DIV1 =是一个Photoshop指南
- DIV2 =包含的图像的库
- DIV3 =列出的个人联系方式
当他们都需要隐藏我的页面加载;
- DIV1 =隐藏
- DIV2 =隐藏
- DIV3 =隐藏
他们还铺设ontop的彼此的（占据具有相同的宽度，但不同的高度相同的空间）。
有这些div触发其上方visbilities一个水平菜单;
| 查看1 | 查看2 | 查看3 |
如果用户点击“查看1”，DIV1变得可见;
- DIV1 =可见
- DIV2 =隐藏
- DIV3 =隐藏
如果用户点击“查看2”，只有DIV2可见;
- DIV1 =隐藏
- DIV2 =可见
- DIV3 =隐藏
与同为点击“查看3”;
- DIV1 =隐藏
- DIV2 =隐藏
- DIV3 =可见
我目前的解决方案是通过这里的jsfiddle可用;
http://jsfiddle.net/t6cU4/
仅使用的复选框和不透明度设置与<div> <label>和<input>
我该如何去这在尽可能小的方式仅使用HTML和CSS（无脚本）？
- 我试图做到的，是一个单一的页面设计，在没有外部页面中使用
- 后台（或活动）的风格也将使用的菜单项（这样用户就知道它的div他们正在查看）
- 与当前解决方案的问题是，标签和没有选择效应和的div不重叠（它们出现在下面彼此像列表重叠内侧）。 这个标志也与项目3单击标签时一起消失
诀窍是添加一个<label>标签的后<input type="checkbox">和在CSS，添加选择:checked用于输入，等的触发。
HTML
<input class="trigger" id="1" type="checkbox">
<label for="1">Click me</label>
<div>Surprise!</div>
<br><br>
<input class="trigger" id="2" type="checkbox">
<label for="2">Click me too</label>
<div>Surprise again!</div>
CSS
.trigger + label + div /*This selects the div that is placed after a label that's after a element with 'trigger' class*/
{
display:none; /*hiding the element*/
}
.trigger /*This selects a element with class 'trigger'*/
{
display:none; /*hiding the element*/
}
.trigger:checked + label + div /*This selects the div that is placed after a label that's after a CHECKED input with class 'trigger'*/
{
display:block; /*showing the element*/
}
见工作小提琴
要么
见拨弄说明
2014年7月30日 - 更新：
你说你想要的div没有出现任何菜单的变形，对不对？ 尽量把所有<div>的底部，并把每一个相应<input>之前。 标签留在上面。
就这样：
<label for="1">Click me</label>
<label for="2">Click me too</label>
<br/><br/>
<input class="trigger" id="1" type="checkbox"/>
<div class="cont"><strong>1st Title</strong><br/>And 1st content.</div>
<input class="trigger" id="2" type="checkbox"/>
<div class="cont"><strong>2nd Title</strong><br/>And 2nd content.</div>
在CSS：
.trigger:checked + div {
display:block;
}
- >查看新小提琴< -
（很抱歉，如果我的英语不好）
尝试不同的CSS菜单。 你能抢到不少来自谷歌。 下面是从网上收集的一些样本：
http://www.smashingapps.com/2013/02/18/48-free-dropdown-menu-in-html5-and-css3.html
http://css3menu.com/enterprise-green.html
