如何滚动jQuery UI选项卡？

Question

我有一个大小为600px X 150px的div，我需要在其中粘贴一个jQuery UI选项卡。将只有2个选项卡，但每个选项卡都将包含大量文本和图像，但我不想调整div的大小。如果我在css中插入溢出选项到div或.ui-tabs，则会出现两个滚动条 - 一个来自div，另一个在选项卡中并且它滚动整个选项卡面板。 问题：如何在选项卡内容中插入垂直滚动条？

谢谢您的帮助。

- dsplatonov

Answer 1

如果我理解你的问题正确，我想我有一个解决方案。这里是jsFiddle上的实时示例。

我添加了两个类，一个应用于整个标签元素，另一个应用于每个标签面板。

.container{
    width: 600px;
}
.panel{
    height: 150px;
    overflow: auto;
}

(container 类名也可以被改成 ui-tabs，这样你就可以添加 jQuery UI 的 ui-tabs 类了，而 panel 类名也可以被改成 ui-tabs-panel，这样你就可以添加 jQuery UI 的 ui-tabs-panel 类了。)

以下是我使用的标记...

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

当我将它与一些jQuery UI选项卡魔法相结合时：

$(document).ready(function() {
    $("#tabs").tabs();
});

我最终在选项卡内只有一个滚动条。

希望这能帮到你！

- David Hoerster

Answer 2

只需使用CSS来处理ui-tab-content类，就像在样式表中的任何位置添加CSS代码一样，希望你能完成。

.ui-tab-content, .ui-tabs-panel{overflow: auto;}

谢谢

- Muhit