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

I am trying to nest horizontal tabs within vertical tabs with no success. The horizontals keep inheriting the attributes of their parent verticals. I followed steps to a solution that supposedly works to no avail.

我试图将水平标签嵌在垂直标签中，但没有成功。horizontals继续继承其父垂直的属性。我遵循了一种可能不起作用的解决方案。

How can I have horizontal tabs nested under vertical tabs with jQuery.tabs()?

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

Please check out my jsFiddle (Note: The nested tabs start on main tab 2).

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

1 个解决方案

#1

The problem is in the CSS.

问题在于CSS。

The CSS provided by the jQuery UI site doesn't select direct descendants. Their CSS is applying the vertical classes to all matches. To be able to have a nested horizontal tabs inside of vertical tabs, you need to modify the jQuery UI classes to only select direct descendants by applying >.

jQuery UI站点提供的CSS并不选择直接的后代。他们的CSS将垂直类应用到所有匹配。为了能够在垂直选项卡中包含嵌套的水平选项卡，需要修改jQuery UI类，只通过应用>选择直接的后代。

That goes for the CSS in the jQuery too.

这也适用于jQuery中的CSS。

See working jsFiddle demo

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