jQuery选项卡，用于选项卡和内容的单独div [英] jQuery tabs, separate divs for tabs and content

问题描述

我正在使用jquery选项卡，除了我希望列表(选项卡)和内容具有单独的div之外，没有任何问题.

I'm using jquery tabs with no problems except that I would like to have separate divs for the list (tabs) and the content.

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

But what I would like to do is wrap the ul and the content in separate divs.

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

我已经浏览了文档，但是没有看到指定它的地方.任何帮助将不胜感激.

I've looks through the documentation but dont see a place to specify this. Any help would be greatly appreciated.

推荐答案

我刚刚尝试了一下.您可以将内容包装到div中.仅当您将ul包裹在div中时，它才会中断.

I just tried it out. You can wrap the content into a div. It's only when you wrap the ul in a div that it breaks.

由于无序列表被认为是块级的，所以确实不需要将它们包装在标头div中，除非您想将 ohter 放在该标头区域中，这很可能会仍然导致js中断.

Since unordered-lists are considered block-level, there really isn't a need to wrap them in a header div, unless you want to put ohter things in that header area, which would probably cause the js to break anyway.

不确定这是您想要的东西，但也许离它更近了.

Not sure this is what you want, but maybe it's a step closer.

我刚刚在Firebug中打开了不起作用的示例代码(带有标头包装div的示例代码)，以了解样式为何不起作用. jquery-ui永远不会将类添加到无序列表或列表项.这意味着tabs模块必须在查找作为主div子级的第一个无序列表(而不是作为后代的第一个无序列表).这是有道理的，因为遍历每个子元素以查找它们包含PLUS的无序列表会更加困难(我认为)是考虑到直接子级的任何无序列表，然后确定哪个是直接子元素.应该放在选项卡中.

I just opened up the sample code that doesn't work (the one with the header wrapper div) in Firebug to see why the styling doesn't work. jquery-ui never adds the classes to the unordered list or the list items. This means that the tabs module must be looking for the first unorded list that is a child of the main div (as opposed to the first unordered list that is a descendant). This makes some sense, because it would be much more difficult (I think) for it to traverse every child element to look for an unordered list that they contain PLUS take into account any unordered lists that are direct children, then determine which is the one that should be made into the tabs.

但是，我发现您可以做的是将其他事情放在无序列表上方.因此，例如，如果您希望将站点名称放在选项卡上方，则可以这样操作:

But what you can do, I discovered, is put other things above the unordered list. So if you wanted, say, to put your site name above the tabs, you could do so like this:

<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中但在实际选项卡的上方，因此看起来非常清晰.

And since it's within the tabs div but above the actual tabs, it looks pretty sharp.

这篇关于jQuery选项卡，用于选项卡和内容的单独div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！