我正在尝试使用 jQuery 嵌套选项卡,一些是水平的,一些是垂直的。我在 Google 代码上找到了“垂直标签”元素 here并将其合并到我的元素中。我的(简化的)HTML 是:
<div class="htab-outer"> <ul>...</ul> <div class="vtab"> <ul>...</ul> <div class="htab-inner"> <ul>...</ul> </div> </div> </div>
我的 Javascript 看起来像:
$(function() {
$(".htab-outer").tabs();
$(".vtab").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$(".vtab li").removeClass("ui-corner-top").addClass("ui-corner-left");
$(".htab-inner").tabs();
// I've tried with and without the following line and noticed no difference
$(".htab-inner").removeClass("ui-tabs-vertical");
});
最后,垂直标签的 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-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-inner”选项卡都会垂直呈现。
使用 Firebug,原因似乎是 CSS 继承和“ui-tabs-vertical”类。这个 CSS 类被附加到“vtab”和“htab-inner”类。此外,我似乎无法删除它,即使在 Firebug 的控制台中使用 $(".htab-inner").removeClass("ui-tabs-vertical") 也是如此。
有什么建议,还是我只是卡住了?
最佳答案
我发现自己处于类似的情况,我有一个外部垂直选项卡和一个内部垂直呈现的选项卡,我希望它是水平的。这是一种解决方案:
更改垂直选项卡的样式以不选择特定类,在本例中为“筛选”
.ui-tabs-vertical:not(.filt) { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav:not(.filt) { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li:not(.filt) { 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:not(.filt) { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected:not(.filt) { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel:not(.filt) { padding: 1em; float: right; width: 40em;
并且在 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")
关于jquery - 可能/如何使用 jquery.tabs() 将水平选项卡嵌套在垂直选项卡下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6863562/