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

Question

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

如何将水平制表符嵌套在垂直制表符下jQuery.tabs()？

请查看我的jsFiddle (注意:嵌套选项卡从主选项卡2开始).

Answer 1

问题出在CSS中.

jQuery UI站点提供的CSS不会选择直接后代.他们的CSS将垂直类应用于所有匹配.为了能够在垂直选项卡中包含嵌套的水平选项卡,您需要修改jQuery UI类以仅通过应用选择直接后代>.

这也适用于jQuery中的CSS.

参见工作jsFiddle演示

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();
});