jQuery Vertical Tabs使标签内容显示为内联块

Posted 2021-04-06

我正在使用jQuery选项卡，最近切换到垂直选项卡，我注意到内容未放在选项卡后面的“内部”空间中。它放在一个容器div里面，它有一个边缘，看起来就像是在内容盒里面。这对于响应式设计不起作用。

屏幕截图示例：

橙色是边缘。

我想通过在每个标签中添加display: inline-block，我可以在标签后的空格中包含内容。我想知道如何动态添加它，而不是在每个选项卡的div中放置内联样式。

以下是我的标签的html示例：

<div id="tabs-1" style="display: inline-block">
    <div id="placeholder" class="chart-resize"></div>
    <div id="placeholder2" class="chart-resize"></div>
</div>

<div id="tabs-2" style="display: inline-block">
    <div id="placeholder3" class="chart-resize"></div>
    <div id="placeholder4" class="chart-resize"></div>
</div>

这是垂直选项卡的jQuery部分：

$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass( "ui-corner-left" );

jQueryUI.css中的所有样式都是默认的。

答案

使用display: inline-block作为属性定义类并将其添加到每个选项卡不起作用，因为您将覆盖非活动选项卡样式，将非活动选项卡的内容设置为也具有display: inline-block，因此每个选项卡的所有内容都显示在一个中。

相反，我做了一些摆弄，并在jQuery UI样式表中找到了一个CSS类，您可以将显示属性从默认的display: block更改为display: inline-block。这允许内容实际上包含在标签内容正方形的“内部”中，从而创建响应更快的设计。

这是班级：

.ui-tabs .ui-tabs-panel {
    display: inline-block;
    border-width: 0;
    padding: 1em 1.4em;
    background: 0 0
}