Toggle Content via Menu (Pure HTML and CSS)

问题:

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

回答1:

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)

回答2:

Try different CSS menus. You can grab a lot from google. Here are some samples collected from web:

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

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