javascript - jQuery Vertical Tabs 使选项卡内容显示为内联 block

Question

我正在使用 jQuery 选项卡，最近切换到垂直选项卡，我注意到内容没有放在选项卡后面的空间“内部”。它放置在一个容器 div 中，该容器 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 中的所有样式都是默认的。

Answer 1

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