Question

我试图在垂直标签中嵌套水平标签但没有成功。水平线继续继承其父垂直的属性。我按照步骤找到了一个无效的解决方案。

如何在jQuery.tabs()的垂直标签下嵌套水平标签？

请查看我的jsFiddle （注意：嵌套标签位于主标签2 上）。

Answer 1

问题在于CSS。

CSS provided by the jQuery UI site未选择直接后代。他们的CSS将垂直类应用于所有匹配。为了能够在垂直选项卡中包含嵌套的水平选项卡，您需要通过应用>来修改jQuery UI类以仅选择直接后代。

这也适用于jQuery中的CSS。

See working jsFiddle demo

CSS

.ui-tabs-vertical {
    width: 55em;
}
.ui-tabs-vertical > .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
}
.ui-tabs-vertical > .ui-tabs-nav li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
}
.ui-tabs-vertical > .ui-tabs-nav > li > a {
    display:block;
}
.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
}
.ui-tabs-vertical > .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 40em;
}

的jQuery

$(function () 
{
    $("#htabs-outer").tabs();

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

    $("#htabs-inner").tabs();
});

如何使用jQuery.tabs（）将垂直选项卡嵌套在水平选项卡下？

1 个答案:

CSS

的jQuery