0

私は一種の純粋なhtml/cssタブシステムをやろうとしています。私は持っている

<div>
    <input class="tab1" type="radio" checked/>
    <input class="tab2" type="radio"/>
</div>

<div class="content">
    <div class="tab-1">

    </div>
    <div class="tab-2">

    </div>
</div>

そして私のcss

.content > div {
    opacity:0;
}

input.tab1:checked ~ .tab-1, input.tab2:checked ~ .tab-2  {
    opacity: 1
}

ただし、チルダ~は想定どおりに機能していません (div は正確には兄弟ではないため) - css を他のノードに渡って動作させるにはどうすればよいですか? cssで「言う」方法はありますか？

4

4 に答える 4

3

CSS には親セレクターがないため、1 レベル上に移動する必要があります。この記事を読みたいと思うかもしれません: CSS に親セレクターがない理由(ただし、 CSS4には親セレクターがあります)

できること:

オプション 1 : HTML を変更します。

.a

<input class="tab1" type="radio" checked/>
<input class="tab2" type="radio"/>

<div class="content">
    <div class="tab-1"></div>
    <div class="tab-2"></div>
</div>

そして使うinput.tab1:checked ~ .content .tab-1

.bここで説明されているような構造を試してください: http://css-tricks.com/functional-css-tabs-revisited/ - 基本的には、タブのグループとタブ コンテンツのグループを作成しないという考えです。ただし、各タブを対応するコンテンツでグループ化します。

オプション 2 : JavaScript を使用する (これは、純粋な CSS タブ システムの考えに反しますが、本当です)

重要な注意：opacity親ノードで < 0 を設定すると、すべての子が同じopacity値になり、それを変更するためにできることは何もないことに注意してください(親の不透明度を再度 1 に設定することを除いて :P )。

于 2012-05-28T11:30:24.273 に答える
0

,の代わりに a を使用し~ます。

すべての CSS セレクターのリストを確認してください。

W3 CSS セレクター

于 2012-05-28T11:28:01.103 に答える
0

純粋な CSS ではこれを行うことはできません。tab1と の間には関係がありませんtab-1。

これは jQuery タブのマークアップから取られていると思いますか? このようにしようとするよりも、jQuery タブの使用に固執する方がおそらく良いでしょう。

于 2012-05-28T11:28:32.773 に答える
0

残念ながら、階層を上に移動する CSS の方法がないため、それはできません。これは Javascript で行う必要があります。

于 2012-05-28T11:28:36.097 に答える