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

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