Question

假设我有三个包含独特内容的div;

div1 =是Photoshop指南
div2 =包含图片库
div3 =列出个人联系方式

当我的页面加载时，它们都需要隐藏;

div1 = hidden
div2 = hidden
div3 = hidden

它们也被放置在彼此之上（占据相同宽度，但高度不同的空间）。

这些div上面有一个水平菜单可以触发它们的可见性;

|查看1 |查看2 |查看3 |

如果用户点击“查看1”，则div1变为可见;

div1 = visible
div2 = hidden
div3 = hidden

如果用户点击“查看2”，则只能看到div2;

div1 = hidden
div2 = visible
div3 = hidden

点击“查看3”也一样;

div1 = hidden
div2 = hidden
div3 =可见

我目前的解决方案可以通过JSFiddle在这里获得;

http://jsfiddle.net/t6cU4/

仅使用<div>，<label>和<input>

的复选框和不透明度设置

如何以尽可能小的方式仅使用HTML和CSS（无脚本）来解决这个问题？

我想要实现的是单一页面设计，其中没有使用外部页面
背景（或活动）样式也可用于菜单项（因此用户知道他们正在查看哪个div）
当前解决方案的问题在于标签并没有选择效果且div不重叠（它们在重叠之下显示为彼此之下）。单击标签

Answer 1

诀窍是在<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*/
}

<强>

<强> See Working Fiddle

或者

<强>

<强> See Fiddle With Explanations

07.30.2014 - 更新：

你说你希望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;
}

-> See new Fiddle <-

（对不起，如果我的英语不好）

Answer 2

尝试不同的CSS菜单。你可以从谷歌中获取很多东西。以下是从网络收集的一些样本：

http://www.smashingapps.com/2013/02/18/48-free-dropdown-menu-in-html5-and-css3.html

http://css3menu.com/enterprise-green.html

通过菜单切换内容（纯HTML和CSS）

2 个答案:

<强> See Working Fiddle

<强> See Fiddle With Explanations

07.30.2014 - 更新：

-> See new Fiddle <-