显示DIV内容，直到选择另一个选项

Question

我有一个用作导航栏的DIV。它会在点击时完全改变我喜欢的内容。但是，我希望我的产品设计内容最初显示，直到单击另一个选项。

严格的CSS

HTML BELOW

<a href="#div1">PRODUCT DESIGN </a> | 
<a href="#div2">PRINT DESIGN</a> | 
<a href="#div3">LOGOS</a> | 
<a href="#div4">WEB DESIGN</a> | 
<a href="#div5">WEBSITES</a>

<div id="togg">
    <div id="div1">
PRODUCT DESIGN
    </div>

    <div id="div2">
PRINT DESIGN
    </div>

    <div id="div3">
LOGOS
    </div>

    <div id="div4">
WEB DESIGN
    </div>

    <div id="div5">
WEBSITES
    </div>
</div>

CSS BELOW

#togg > div {
    display: none;
}

#togg > div:target {
    display: block;
}

http://jsfiddle.net/xkaaaylax/3d2m3fso/

Answer 1

您可以这样做：

hide { display: none; }

#div1 { display: block; }

http://jsfiddle.net/fa2f8e00/