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

问题描述

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

• div1 =是Photoshop指南


• div2 =包含图片库


• div3 =列出个人联系信息

我的网页加载它们都需要隐藏;

• div1 =隐藏


• div2 =隐藏


• div3 =隐藏

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

这些div上方有一个水平菜单，用于触发它们的可见性;

|查看1 |查看2 |如果用户点击'查看1'，div1将变为可见;

• div1 =可见


• div2 =隐藏


• div3 =隐藏
  

如果用户点击查看2，则只有div2可见;

• div1 =隐藏


• div2 =可见


• div3 =隐藏

/ b>



点击'查看3';






• div1 =隐藏


• div2 =隐藏


• div3 = visible






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







仅使用复选框和不透明度设置（< div> ，< label> 和< input>





如何仅使用HTML和CSS（无脚本）以最小的方式吗？






• 我试图实现的是一种独特的页面设计，其中不使用外部页面
  
• 背景（或活动）样式也可用于菜单项（因此用户知道他们正在查看哪个div）
  
• 当前解决方案的问题在于标签并没有选择效果，并且div不重叠（它们像下面一样出现在彼此之下列表中重叠）。点击标签时，徽标也会随着第3项消失




解决方案

< label> 标记位于< input type =checkbox> 之后并在CSS中添加选择器：已检查作为输入，例如触发器。



HTML

 < input class =triggerid =1type =checkbox> 
< label for =1>点击我< / label> 
< div>惊喜！< / div> 
 
< br>< br> 
 
< input class =triggerid =2type =checkbox> 
< label for =2>点击我也< / label> 
< div>再次惊喜！< / div> 
  

CSS


  .trigger + label + div / *这会选择位于具有'触发器'类的元素之后的div之后的div * / 
 {
 display ：没有; / *隐藏元素* / 
} 
 
 .trigger / *选择一个类为'trigger'的元素* / 
 {
 display：none; / *隐藏元素* / 
} 
 
 .trigger：checked + label + div / *这将选择位于标签之后的div，该标签位于CHECKED输入后， * / 
 {
 display：block; / *显示元素* / 
} 
  







a href =http://jsfiddle.net/HN9am/2/ =nofollow>见小提琴解释







$ b

07.30.2014 - UPDATE：







你说你想让div出现没有任何菜单变形，对吧？尝试将所有< div> 放入底部，并在每个对应的< input> 之前放置。标签保持在最上面。


就像那样：




 < label for =1> ;点击我< / label> 
 
< label for =2>点击我也< / label> 
 
< br />< br /> 
 
< input class =triggerid =1type =checkbox/> 
< div class =cont>< strong> 1st Title< / strong>< br />和1st内容。< / div> 
 
< input class =triggerid =2type =checkbox/> 
< div class =cont>< strong> 2nd Title< / strong>< br />和第2个内容。< / div> 
  

和CSS：



  .trigger：checked + div {
 display：block; 
} 
  





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




Say I have three div's which contain unique content;

• div1 = Is a Photoshop guide
• div2 = Contains a gallery of images
• div3 = Lists personal contact details

When my page loads they all need to be hidden;

• div1 = hidden
• div2 = hidden
• div3 = hidden

They are also laid ontop of one another (occupy the same space having the same width, but varying heights).

There's a horizontal menu above these divs that trigger their visbilities;

| View 1 | View 2 | View 3 |

If a user clicks 'View 1', div1 becomes visible;

• div1 = visible
• div2 = hidden
• div3 = hidden

If a user clicks 'View 2', only div2 is visible;

• div1 = hidden
• div2 = visible
• div3 = hidden

And the same for clicking 'View 3';

• div1 = hidden
• div2 = hidden
• div3 = visible

My current solution is available via JSFiddle here;

http://jsfiddle.net/t6cU4/

only using check-boxes and opacity settings with <div>, <label> and <input>

How do I go about this using only HTML and CSS (no scripts) in the smallest way possible?

• What I'm trying to achieve is a singular page design, where no external pages are used
• A background (or active) style would also be of use for the menu items (so the user knows which div they are viewing)
• The problem with the current solution is that the labels and have no selection effect and the divs do not overlap (they appear below each other like a list inside of overlapping). The logo also disappears along with item 3 when clicking a label
解决方案

The trick is add a <label> tag after a <input type="checkbox"> and in CSS, add the selector :checked for the input, like a trigger.

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

Or

See Fiddle With Explanations





07.30.2014 - UPDATE:


You said you want the divs appearing without any menu deformations, right? Try to put all <div>'s in the bottom and put every corresponding <input> before that. The labels stay on top.

Just like that:


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

and in CSS:

.trigger:checked + div {
    display:block;
}

-> See new Fiddle <-




(Sorry if my english is bad)

这篇关于通过菜单切换内容（纯HTML和CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！