如何滚动 jQuery ui 选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3321387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll jQuery ui tabs?
提问by dsplatonov
I have a div with 600px X 150px and i need to paste there a jQuery ui tabs. There will be only 2 tabs, but each tab will contain a lot of text and images, but i don't want to resize div. If i insert overflow option in css to div or .ui-tabs there appear 2 scrolls - 1 from div and another in tab and it scrolls all tab panel. Question: how to insert vertical scroll into tab content?
我有一个 600px X 150px 的 div，我需要在那里粘贴一个 jQuery ui 选项卡。只有 2 个标签，但每个标签将包含大量文本和图像，但我不想调整 div 的大小。如果我将 css 中的溢出选项插入到 div 或 .ui-tabs 中，则会出现 2 个滚动 - 1 个来自 div，另一个在选项卡中，它会滚动所有选项卡面板。问题：如何在标签内容中插入垂直滚动？
Thanks in advance.
提前致谢。
回答by David Hoerster
I think I have a solution for you, if i understand your question correctly. Here's the live exampleon jsFiddle.
如果我正确理解您的问题，我想我有一个解决方案。这是jsFiddle上的实时示例。
I added two classes, one that's applied to the overall tab element and one that's applied to each tab panel.
我添加了两个类，一个应用于整个选项卡元素，一个应用于每个选项卡面板。
.container{
width: 600px;
}
.panel{
height: 150px;
overflow: auto;
}
(The containerclass could also be renamed to ui-tabsso that you add to the jQuery UI ui-tabsclass, and the panelclass could be renamed to ui-tabs-panelso that you add to the jQuery UI ui-tabs-panelclass.)
（container也可以将类重命名为ui-tabs以便添加到 jQuery UIui-tabs类，并且panel可以将类重命名为ui-tabs-panel以便添加到 jQuery UIui-tabs-panel类。）
Here's the mark-up that I used...
这是我使用的标记...
<div class='main'>
<div id="tabs" class='container'>
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1" class='panel'>
<p>tab1 text...</p>
</div>
<div id="tabs-2" class='panel'>
<p>tab2 text...</p>
</div>
</div>
</div>
When I hook this up with some jQuery UI tab magic:
当我用一些 jQuery UI 选项卡魔术来连接它时：
$(document).ready(function() {
$("#tabs").tabs();
});
I end up with a single scroll bar inside the tab.
我最终在选项卡内有一个滚动条。
I hope this helps!
我希望这有帮助！
回答by Muhit
just use css for ui-tab-content class its like add the css code to any where in your style sheets hope you will be done.
只需将 css 用于 ui-tab-content 类，就像将 css 代码添加到样式表中希望完成的任何位置一样。
.ui-tab-content, .ui-tabs-panel{overflow: auto;}
Thanks
谢谢
