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

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

如何使用

jQuery.tabs（）

将水平选项卡嵌套在垂直选项卡下

---

请查看我的（注意：嵌套选项卡从主选项卡2开始）。

问题出在CSS中

不选择直接子体。他们的CSS将垂直类应用于所有匹配项。为了能够在垂直选项卡中嵌套水平选项卡，您需要通过应用

，修改jQuery UI类以仅选择直接子体

这也适用于jQuery中的CSS

---

CSS

---

jQuery

.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;
}

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