通过菜单切换内容（纯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*/
}

参见工作小提琴

要么

请参阅小提琴及其说明

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;
}

->查看新的小提琴<-

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

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