0

好的，所以我有一个非常基本的 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/

4

5 回答 5

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

于 2013-06-13T11:47:13.990 回答
0

使用下面的 CSS：

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

例子

于 2013-06-13T11:49:18.057 回答
0

您应该替换div.main div 中的display: nonefordisplay: block

于 2013-06-13T11:49:49.580 回答
0

给你的第一个项目额外的风格：

display: block

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

于 2013-06-13T11:45:38.843 回答
0

给你的第一个 div 一个display:block属性：

div.main div:first-child{
    display:block;
}
于 2013-06-13T11:47:40.097 回答