如何滚动jQuery ui标签？

Question

我有600px X 150px的div,我需要在那里粘贴一个jQuery ui标签.将只有2个选项卡,但每个选项卡将包含大量文本和图像,但我不想调整div的大小.如果我在css中插入溢出选项到div或.ui-tabs,则会出现2个滚动 - 1来自div而另一个来自tab,它会滚动所有选项卡面板.问题:如何将垂直滚动插入选项卡内容？

提前致谢.

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();
});

我最终在选项卡中有一个滚动条.

我希望这有帮助!

Answer 2

只需将css用于ui-tab-content类,就像将css代码添加到样式表中希望完成的任何位置一样.

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

谢谢