Javascript 没有JS的CSS默认选择

好的，我有一个非常基本的CSS标签内容系统，非常整洁，但是我希望能够创建一个默认状态，这样第一个标签分区就可以打开，而无需选择

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

非常感谢您的建议和帮助

---

编辑：我可以得到要显示的第一个div，在目前为止所有人的帮助下（非常感谢），我只需要在选择一个额外的选项卡时使其消失，以下是jsfiddle:

为您的第一个项目提供额外的样式：

display: block

---

这将覆盖通常隐藏它们的

div.main div{display:none}

样式，因为它更具体。

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

---

但是第一个元素总是可见的，并且必须隐藏在其他元素后面。这可以通过

z-index

和绝对定位来实现。

给出第一个div a

显示：block

属性：

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

使用以下CSS：

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

---

您应该为div.main div中的

display:none

替换

display:block

，为每个选项卡添加一个class=“tab”，为所选选项卡添加一个class=“tab selected”，然后您可以格式化.tab.selected与.tab分开。为此，可能值得查看jQuery或纯Javascript，因此，您可以使用

addClass

或

removeClass

等，因为您无法轻松使用CSS，因为所有的解决方案都不起作用，因为即使您单击另一个选项卡项，第一项也始终可见。我已经尝试过，但当您选择其他div时，它仍然存在问题是，虽然加载页面时第一个div内容将可见，但这意味着即使单击其他选项卡，它也将始终可见。好的，我得到的内容似乎仍然存在于其他选项卡上

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

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

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