如何滚动 jQuery ui 标签？

Posted 2023-03-06

【中文标题】如何滚动 jQuery ui 标签？

【英文标题】：How to scroll jQuery ui tabs?

【发布时间】：2011-03-20 06:44:42

【问题描述】：

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

提前致谢。

【参考方案1】：

如果我正确理解您的问题，我想我可以为您提供解决方案。这是 jsFiddle 上的 live example。

我添加了两个类，一个应用于整个选项卡元素，一个应用于每个选项卡面板。

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

我最终在标签内有一个滚动条。

我希望这会有所帮助！

【参考方案2】：

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

.ui-tab-content, .ui-tabs-paneloverflow: auto;

谢谢