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的子节点的第一个unorded列表（而不是作为后代的第一个无序列表）。这是有道理的，因为它会更难（我认为）它遍历每个子元素以查找它们包含的无序列表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内但在实际标签上方，因此看起来非常清晰。

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

1 个答案:

更新