1

リスト（タブ）とコンテンツに別々のdivを設定したいことを除いて、問題なくjqueryタブを使用しています。

<div id="tabs">
    <ul>
        <li><a href="#articles">Articles</a></li>
        <li><a href="#videos">Videos</a></li>
        <li><a href="#photos">Photos</a></li>
    </ul>

    <div id="articles" class="bd">Lorem ipsum dolor sit amet,</div>
    <div id="videos" class="bd">Lorem ipsum dolor sit amet,</div>   
    <div id="photos" class="bd">Lorem ipsum dolor sit amet,</div>
</div>

しかし、私がやりたいのは、ulとコンテンツを別々のdivでラップすることです。

<div id="tabs">
    <div class="hd">
        <ul>
            <li><a href="#articles">Articles</a></li>
            <li><a href="#videos">Videos</a></li>
            <li><a href="#photos">Photos</a></li>
        </ul>
    </div>

    <div class="bd">
        <div id="articles" class="bd">Lorem ipsum dolor sit amet,</div>
        <div id="videos" class="bd">Lorem ipsum dolor sit amet,</div>   
        <div id="photos" class="bd">Lorem ipsum dolor sit amet,</div>
    </div>
</div>

ドキュメントを調べましたが、これを指定する場所が見つかりません。どんな助けでも大歓迎です。

4

1 に答える 1

0

試してみました。コンテンツをdivにラップできます。ulをdivでラップした場合にのみ、それが壊れます。

unordered-listsはブロックレベルと見なされるため、ヘッダー領域に他のものを配置したい場合を除いて、実際にはヘッダーdivでラップする必要はありません。

これがあなたの望むものかどうかはわかりませんが、おそらく一歩近づいています。

アップデート：

Firebugで機能しないサンプルコード（ヘッダーラッパーdivを持つコード）を開いて、スタイリングが機能しない理由を確認しました。jquery-uiは、クラスを順序付けされていないリストまたはリストアイテムに追加することはありません。これは、tabsモジュールが、メインdivの子である最初の順序付けされていないリストを検索する必要があることを意味します（子孫である最初の順序付けされていないリストとは対照的です）。これはある程度理にかなっています。なぜなら、すべての子要素をトラバースして、それらに含まれる順序付けされていないリストを探し、さらに直接の子である順序付けされていないリストを考慮に入れて、どれが1つであるかを判断するのははるかに難しいからです。それはタブにする必要があります。

しかし、私が発見したように、あなたができることは、順序付けられていないリストの上に他のものを置くことです。したがって、たとえば、タブの上にサイト名を配置したい場合は、次のようにすることができます。

<div id="tabs">
<h1>My Site</h1>
        <ul>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#videos">Videos</a></li>
                <li><a href="#photos">Photos</a></li>
        </ul>

    <div class="bd">
        <div id="articles">Lorem ipsum dolor sit amet,</div>
        <div id="videos">Lorem ipsum dolor sit amet,</div>   
        <div id="photos">Lorem ipsum dolor sit amet,</div>
    </div>
</div>

また、タブdiv内にありますが、実際のタブの上にあるため、かなりシャープに見えます。

于 2009-10-02T06:53:24.170 に答える