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 を表示することができます (多くの感謝) 追加のタブを選択したときにそれを非表示にする必要があるだけです。

4

5 に答える 5

0

div.main divのdisplay: noneforを置き換える必要がありますdisplay: block

于 2013-06-13T11:49:49.580 に答える
0

以下の CSS を使用します。

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

例

于 2013-06-13T11:49:18.057 に答える
0

最初のアイテムに追加のスタイルを与えます:

display: block

div.main div {display: none}これは、より具体的であるため、通常は非表示にするスタイルをオーバーライドします。

于 2013-06-13T11:45:38.843 に答える