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

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 中，除非您想将 ohter 东西放在该标题区域中，这可能会无论如何都会导致js中断。

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

更新：

我刚刚在 Firebug 中打开了不起作用的示例代码（带有标题包装器 div 的代码），以查看样式不起作用的原因。 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 内但在实际标签之上，所以它看起来非常清晰。