jquery - 如何使用 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();
});