Я только что попробовал. Вы можете обернуть содержимое в div. Только когда вы заключаете ul в div, он ломается.
Поскольку неупорядоченные списки рассматриваются на уровне блоков, на самом деле нет необходимости заключать их в div заголовка, если только вы не хотите поместить ohter вещи в эту область заголовка, что, вероятно, приведет к 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>
И поскольку он находится внутри элемента tabs, но над фактическими вкладками, он выглядит довольно резким.