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

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

tabs css html jquery javascript

cela · 技术社区 · 7 年前

我正在使用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 回复 | 直到 7 年前

cela 7 年前

使用定义类 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
}

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

2 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前