javascript - 没有 JS 的 CSS 默认选择

Question

好吧，我已经有了一个非常基本的 CSS 选项卡内容系统，非常整洁干净，但我希望能够创建一个默认状态，以便第一个选项卡 div 无需选择即可打开？

任何想法，我都希望避免使用 jQuery 或 JS，但如果必须这样做，我会使用它。这是编码:

<div id="bar">
<a href="#tab1">Home</a>
<a href="#tab2">About</a>
<a href="#tab3">Contact</a>
<a href="#tab4">Credits</a>
</div>

<div id="container">
<div class="main">
<div id="tab1">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4">... fourth tag element (CREDITS) </div>
</div>
</div>

和风格:

#bar a{padding:4px 6px; background:#E0E9FE; text-decoration:none; font-weight:bold;}
#bar a:hover{color:#003366;}
/* Content Layers */
#container{background:#E0E9FE; padding:10px;}
div.main div {display: none}
div.main div:target {display: block}

非常感谢您的建议和帮助。

编辑:我可以让第一个 div 显示，到目前为止，在每个人的帮助下(非常感谢)我只需要在我选择一个额外的选项卡时让它消失，这里是 jsfiddle:http://jsfiddle.net/HHrYc/

Answer 1

为您的元素提供额外的类总是有用的；)

<div class="main">
<div id="tab1" class="first">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4" class="last">... fourth tag element (CREDITS) </div>
</div>

风格:

div.main div:target, div.main div.first {display: block}

但是第一个元素总是可见的并且必须隐藏在其他元素后面。这可以通过 z-index 和绝对定位来实现。