可能/如何使用jquery.tabs()将水平选项卡嵌套在垂直选项卡下?
我正在尝试用jQuery嵌套选项卡,有些是水平的,有些是垂直的。我在谷歌代码上找到了“垂直标签”项目,并将其合并到我的项目中。我的(简化的)HTML是: 最后,垂直选项卡CSS是:可能/如何使用jquery.tabs()将水平选项卡嵌套在垂直选项卡下?,jquery,css,jquery-ui,Jquery,Css,Jquery Ui,我正在尝试用jQuery嵌套选项卡,有些是水平的,有些是垂直的。我在谷歌代码上找到了“垂直标签”项目,并将其合并到我的项目中。我的(简化的)HTML是: 最后,垂直选项卡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
.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-selected { 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;}
“htab-outer”和“htab-inner”类应水平渲染,“vtab”类应垂直渲染;但是在上面的例子中,“vtab”和“htab内部”选项卡都是垂直渲染的
使用Firebug,原因似乎是CSS继承和“ui选项卡垂直”类。这个CSS类同时附加到“vtab”和“htab内部”类。此外,我似乎无法删除它,即使在Firebug的控制台中使用$(“.htab-inner”).removeClass(“ui-tabs-vertical”)
有什么建议吗,或者我只是被卡住了?我发现自己处于一种类似的情况,在这种情况下,我有一个外部的垂直选项卡,而内部的选项卡垂直地呈现在我希望它水平的位置。这里有一个解决方案: 更改垂直选项卡的样式,使其不选择特定类别,在本例中为“filt” 在javascript上,确保内部htab的子类与它们关联:
$(".htab-inner").children().addClass("filt");
编辑:该解决方案不适用于IE,以下是我最终要做的:
样式更改为:
.ui-tabs-vertical {
width: 71em;
}
.ui-tabs-vertical .ui-tabs-nav-vert {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav-vert 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-vert li a {
display: block;
padding: .5em 1em;
}
.ui-tabs-vertical .ui-tabs-nav-vert li.ui-tabs-selected {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: left;
width: 55em;
}
实例化选项卡的调用类似于:
$("#buttons").tabs().addClass("ui-tabs-vertical"); // <-use your own selector here...
$(".ui-tabs-vertical .ui-tabs-nav").removeClass("ui-tabs-nav").addClass("ui-tabs-nav-vert")
$(“#按钮”).tabs().addClass(“ui选项卡垂直”);// 还提供了一些jQuery UI选项卡样式化解决方案。我无法让Jorge的解决方案发挥作用,并且发现在CSS中简单地使用
更容易。这样,您就不必担心所有类的添加和删除。注意:您仍然需要使用.addClass(“ui选项卡垂直”)代码>如果需要垂直选项卡
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;}
这家伙真的应该选择你的答案。它起了很大的作用
.ui-tabs-vertical {
width: 71em;
}
.ui-tabs-vertical .ui-tabs-nav-vert {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav-vert 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-vert li a {
display: block;
padding: .5em 1em;
}
.ui-tabs-vertical .ui-tabs-nav-vert li.ui-tabs-selected {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: left;
width: 55em;
}
$("#buttons").tabs().addClass("ui-tabs-vertical"); // <-use your own selector here...
$(".ui-tabs-vertical .ui-tabs-nav").removeClass("ui-tabs-nav").addClass("ui-tabs-nav-vert")
.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;}