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

Question

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

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

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

• div1 = 隐藏
• div2 = 隐藏
• div3 = 隐藏

它们也相互叠放（占据相同宽度但高度不同的相同空间）。

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

|查看 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 项一起消失

Answer 1

诀窍是在<input type="checkbox"> 之后添加<label> 标记，在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 菜单。您可以从 google 获取很多信息。 以下是从网上收集的一些样本：

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

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