JQuery вкладки, отдельные элементы для вкладок и содержимого

Question

Я использую вкладки jquery без проблем, за исключением того, что я хотел бы иметь отдельные div для списка (вкладок) и содержимого.

<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>

Я просматриваю документацию, но не вижу места, где можно это указать. Любая помощь будет принята с благодарностью.

Answer 1

Я только что попробовал это. Вы можете обернуть содержимое в div. Только когда вы заключаете ul в div, он ломается.

Поскольку неупорядоченные списки считаются уровнями блоков, на самом деле нет необходимости заключать их в div заголовка, если только вы не хотите поместить другие объекты в эту область заголовка, что, вероятно, в любом случае приведет к разрыву js.

Не уверен, что это то, что вы хотите, но, возможно, это на шаг ближе.

Обновить:

Я просто открыл пример кода, который не работает (тот, что с div-оболочкой заголовка) в Firebug, чтобы понять, почему не работает стилизация. jquery-ui никогда не добавляет классы в неупорядоченный список или элементы списка. Это означает, что модуль tabs должен искать первый неупорядоченный список, который является дочерним по отношению к основному div (в отличие от первого неупорядоченного списка, который является потомком). Это имеет некоторый смысл, потому что было бы намного труднее (я думаю) для него пройти через все дочерние элементы, чтобы найти неупорядоченный список, который они содержат PLUS, с учетом любых неупорядоченных списков, которые являются прямыми дочерними элементами, а затем определить, какой из них является единственным это должно быть сделано во вкладках.

Но то, что вы можете сделать, я обнаружил, это поставить другие вещи выше неупорядоченного списка. Так что, если вы хотите, скажем, поместить название вашего сайта над вкладками, вы можете сделать это следующим образом:

<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 вкладок, но выше реальных вкладок, он выглядит довольно резким.