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和绝对定位来实现。

Answer 2

为您的第一个项目添加其他样式：

display: block

这将覆盖隐藏它们的div.main div {display: none}样式，因为它更具体。

Answer 3

为您的第一个div提供display:block属性：

div.main div:first-child{
    display:block;
}

Answer 4

使用以下CSS：

.main div {display:none;}
.main div:first-child {display:block;}

example

Answer 5

您应该替换div.main div

中display: none的{{1}}

没有JS的CSS默认选择

5 个答案: