代码之家 › 专栏 › 技术社区 › cela

jQuery垂直选项卡使选项卡内容显示为内联块

tabs css html jquery javascript

cela · 技术社区 · 8 年前

我正在使用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是默认值。

1 回复 | 直到 8 年前

cela 8 年前

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

相反,我做了一些修改,在jQuery UI样式表中找到了一个CSS类,您可以 将显示属性从默认值更改为 display: block 到 显示:内联块 . 这允许内容实际包含在选项卡内容方块的“内部”,从而创建更具响应性的设计。

以下是课程:

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

推荐文章

Pawan Nogariya · 是否有方法将数据或ngModel附加到材料选项卡上?

1 年前

Ishan Salamon · target=“_blank”是否重定向到新窗口或新选项卡?

1 年前

Beep · 尝试在移动设备上使用堆叠标签

1 年前

Northern Condor · 在Visual Studio 2022社区版中对选项卡进行分组的方便工具?

1 年前

drevil · Django模板带有用于循环的BS5选项卡窗格

2 年前

Nelson Silva · 访问HTMLcollection时获取null

8 年前

G Rover · 当单元格总数=0时,如何更改选项卡的颜色

8 年前

Anita · 模块appregistry不是已注册的可调用模块(调用runApplication)

8 年前

zekephp · PHP。txt到数组制表符分隔

8 年前

ymmx · 是否可以拖动QTabWidget并打开一个新窗口,其中包含pyqt5中此选项卡中的内容?

8 年前