jQuery选项卡，选项卡和内容的单独div

我使用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>

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

但我想做的是将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>

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

---

我已经查阅了文档，但没有找到具体的地方。任何帮助都将不胜感激。

我刚刚试过。您可以将内容包装到div中。只有当您将ul包装到div中时，它才会中断

由于无序列表被认为是块级别的，因此实际上不需要将它们包装在header div中，除非您想将其他内容放在该header区域中，否则可能会导致js崩溃

不确定这是你想要的，但也许这更接近你

更新： 我刚刚在Firebug中打开了不起作用的示例代码（带有header-wrapper-div的代码），看看为什么样式不起作用。jQueryUI从不将类添加到无序列表或列表项中。这意味着tabs模块必须查找作为主div子级的第一个无序列表（与作为子级的第一个无序列表相反）。这是有意义的，因为遍历每个子元素以查找它们所包含的无序列表要困难得多（我认为），还要考虑任何作为直接子元素的无序列表，然后确定哪个是应该放入选项卡中的列表

但我发现，你能做的是把其他事情放在无序列表之上。因此，如果您想（比如）将站点名称放在选项卡上方，您可以这样做：

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

我的网站





Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

因为它在tabs div中，但在实际的tabs之上，所以看起来非常清晰