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>
但我想做的是将 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>
我浏览了文档，但没有看到指定这一点的地方。任何帮助将不胜感激。
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>
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我刚刚尝试了一下。您可以将内容包装到 div 中。只有当你将 ul 包裹在 div 中时它才会中断。
由于无序列表被认为是块级的，因此实际上没有必要将它们包装在标头 div 中，除非您想在该标头区域中放置其他内容，这可能会导致 js无论如何都要打破。
不确定这是否是您想要的，但也许更接近了一步。
更新：
我刚刚在 Firebug 中打开了不起作用的示例代码（带有标头包装器 div 的代码），以了解样式不起作用的原因。 jquery-ui 永远不会将类添加到无序列表或列表项中。这意味着 tabs 模块必须查找作为主 div 子级的第一个无序列表（而不是作为后代的第一个无序列表）。这是有道理的，因为（我认为）它遍历每个子元素来查找它们包含的无序列表要困难得多，并且考虑到任何直接子元素的无序列表，然后确定哪个是那个。应该将其放入选项卡中。
但我发现，你能做的就是将其他事情放在无序列表之上。因此，如果您想将站点名称放在选项卡上方，您可以这样做：
由于它位于选项卡 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.
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.
update:
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:
And since it's within the tabs div but above the actual tabs, it looks pretty sharp.