jQuery Vertical Tabs 使选项卡内容显示为内联块答案

【问题标题】：jQuery Vertical Tabs making tab content display as inline-blockjQuery Vertical Tabs 使选项卡内容显示为内联块
【发布时间】：2018-01-04 17:37:46
【问题描述】：

我正在使用 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 中的所有样式都是默认样式。

【问题讨论】：

定义一个类以用作选择器，例如：<div id="tabs-1" class="tab-content">...</div>，将您的样式声明添加到的 css 选择器示例：.tab-content { display: inline-block; }

标签： javascript jquery html css tabs

【解决方案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
}

【讨论】：