0

わかりました...純粋なCSSタブコントロールがすでにたくさんあることは知っています...

ここに私のHTMLがあります

<div class="tabs">
    <ul>
    <li><a href="#tabPage1">One</a></li>
    <li><a href="#tabPage2">Two</a></li>
    <li><a href="#tabPage3">Three</a></li>
    </ul>
    <div id="tabPage1">
    <p>
        Hello World
    </p>
    </div>
    <div id="tabPage2">
    <p>
        Goodbye World
    </p>
    </div>
    <div id="tabPage3">
    <p>
        Another World, somewhere far, far away!
    </p>
    </div>
</div>

ここに私のCSSがあります

.tabs > div {
    display: none;
}

.tabs > div:target {
    display: block;
}

私は振る舞いだけに関心があるので、この例のスタイリングはありません。

ここで試すことができます... http://jsfiddle.net/rcrdC/

  1. アンカーがクリックされるまで最初の div を表示するにはどうすればよいですか?
  2. アンカーを別のもの（つまり#tabPage4）に変更しても、表示されたdivを表示したままにするにはどうすればよいですか...それが理にかなっていますか？
4

3 に答える 3

0

ここから、このように最後のものを最初に表示させることができます（動作例）

.tabs > div:target ~  div:last-child,
.tabs > div{
    display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
    display: block;
}

最初のタブページを最後に移動するだけです。

于 2013-10-31T23:24:37.163 に答える
0

読み込み時に最初のタブを表示するのはそれほど難しくありません。:first-of-type擬似クラスを使用できます。このようなもの：

.tabs > div{
    display: none;
}
.tabs > div:first-of-type,
.tabs > div:target {
    display: block;
}

2番目の質問は少し難しいです。ターゲットがタブの外のアンカーに移動するとすぐに、最初のタブが再び表示されます。http://jsfiddle.net/rcrdC/4/状態を保持するには何らかの方法が必要です。「実際の」解決策は、@StuartKershaw によって既に提案されているように、これを実現するために数行の JavaScript を追加することです。

完全に CSS にすることを主張する場合は、(非表示の) ラジオ ボタンを使用して状態を保持できます。これは少しハックで (入力はそのためのものではありません)、マークアップを少し変更する必要がありますが、実行可能であるはずです。

私が意味することの例はここにあります: http://jsfiddle.net/rcrdC/5/

タブの間にいくつかの非表示のラジオ ボタンを配置したことに注意してください。タブへのリンクを、それらのラジオを参照するラベルに置き換えました。:checked次に、と+セレクターを組み合わせて使用​​します。ロード時に表示されるタブは、checked属性を持つタブです。

繰り返しますが、これは私が推奨する方法ではありません。cssのタスクである特定のレイアウトを実現することを唯一の目的として、マークアップに追加しています。また、追加する必要があるものは、意味的に正しいとは言えません...

于 2013-10-31T23:45:45.600 に答える