4

次のように、ボックスのコンテンツを切り替えるためのタブを備えた情報ボックスを作成しようとしています: http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/

いくつかの CSS と jQuery を使えば簡単ですよね？問題は、セマンティック マークアップを使用してそれを行う方法を見つけようとしているため、CSS/JS が無効になっているときに、コンテンツの見出しが正しい順序で表示されるだけです。私が見たすべての例は、次のようになります。

<div id="box-nav">
    <ul>
        <li>Content head 1</li>
        <li>Content head 2</li>
        <li>Content head 3</li>
    </ul>
</div>

<div id="box-content">
    <div id="content-1">
        <p>Blah 1. </p>
    </div>
    <div id="content-2">
        <p>Blah 2. </p>
    </div>
    <div id="content-3">
        <p>Blah 3. </p>
    </div>
</div>

これにより、見出しとそのコンテンツを分離することで非常に簡単に作成できますが、このマークアップを使用して作成したいと思います。

<div id="content-1">
    <h2>Content head 1</h2>
    <p>Blah 1. </p>
</div>
<div id="content-2">
    <h2>Content head 2</h2>
    <p>Blah 2. </p>
</div>
<div id="content-3">
    <h2>Content head 3</h2>
    <p>Blah 3. </p>
</div>

プレーンな HTML として優雅に劣化するようにしますが、jQuery を使用してマークアップを再配置しない限り、それを理解することはできません。

これを行うクリーンな方法を知っている人はいますか？

4

2 に答える 2

6

私はあなたのためのクリーンで純粋なセマンティックなソリューションを持っています

dl見出し要素の代わりに要素を使用します。納得のいく結果だと思います。

私のソリューションdlでは、セマンティックタブに要素が使用されています。

DL 要素を使用して作成された定義リストは、通常、一連の用語/定義のペアで構成されます (ただし、定義リストには他の用途がある場合があります)。したがって、製品を宣伝するときは、定義リストを使用できます。

次のようなマークアップ:

<div id="wrap">
    <dl>
        <dt id="ft"><a href="#tab1">TAB 1</a></dt>
            <dd id="tab1">tab1 content</dd>
        <dt id="st"><a href="#tab2">TAB 2</a></dt>
            <dd id="tab2">tab2 content</dd>
        <dt id="tt"><a href="#tab3">TAB 3</a></dt>
            <dd id="tab3">tab3 content</dd>
    </dl>
</div>

視覚的な外観は次のようになります。
DL要素

このマークアップからタブ インターフェイスを作成するには、次を使用しますCSS。

#wrap, dt {
    position: absolute;
}

dl {
    overflow: hidden;
}

dt {
    bottom: 100%;
}

dd, dl {
    width: 640px;
    height: 400px;
}

#st {
    left: 92px;
}
#tt {
    left: 184px;
}
于 2012-06-06T12:20:25.083 に答える
0

ターゲット疑似クラスを使用してdivを非表示にするだけでCSSでタブを実行できます

対象クラス

于 2012-06-06T12:05:07.447 に答える