jquery - 如何滚动 jQuery ui 选项卡？

Question

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

提前致谢。

Answer 1

如果我正确理解您的问题，我想我有适合您的解决方案。这是 live example在 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();
});

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

希望对您有所帮助!