CSS没有JS的默认选择

好吧，所以我有一个非常基本的CSS标签内容系统，非常整洁干净，但我希望能够创建一个默认状态，所以第一个标签div是打开的，而不需要选择neccesary？CSS没有JS的默认选择

任何想法，我想顶部避免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/

来源

2013-06-13 mrmason

为每个标签和一个cl添加一个class =“tab”屁股=“标签选择”选定的选项卡，然后你可以格式.tab.selected分离从.tab。 – SinistraD

这可能是值得看看jQuery或纯JavaScript的，所以你可以使用'addClass'或'removeClass'等，因为你不能用CSS轻松完成 - 因为所有的解决方案都不行，因为第一个项目将始终可见，即使您单击另一个选项卡项目。 –

给你第一项附加风格：

display: block

这将覆盖div.main div {display: none}风格，隐藏他们正常的，因为它是更具体。

来源

2013-06-13 11:45:38 IanPudney

我试过，但它仍然存在，当你选择其他股利？：s – mrmason

问题在于，虽然第一个div内容在加载页面时可见，但这意味着即使您单击其他选项卡，它也会始终可见。 –

授予其他类的元素总是有益无害;）

<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-13 11:47:13 Jens

好吧继承人我得到了什么http://jsfiddle.net/HHrYc/似乎仍然存在，虽然在其他标签 – mrmason

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

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

来源

2013-06-13 11:47:40 lukaleli

用途：

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

example

来源

2013-06-13 11:49:18 skparwal

你应该在div.main DIV更换display: none为display: block

来源

2013-06-13 11:49:49 DaftDev

CSS没有JS的默认选择

回答

相关问题