Question

我试图用jQuery嵌套标签，一些水平和一些垂直。我在Google Code 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”）。

有任何建议，还是我被困？

Answer 1

我发现自己处于类似的情况，我有一个外部垂直标签和一个内部垂直标记，我希望它是水平的。这是一个解决方案：

更改垂直制表符的样式，以便不选择特定的类，在本例中为“filt”

.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")

Answer 2

Keith Wood还提供了一些jQuery UI Tabs样式解决方案。

Answer 3

我无法让Jorge的解决方案工作，并且发现在CSS中简单地使用child selector >更容易。这样您就不必担心所有类的添加和删除。注意：如果您需要垂直标签，则仍需要使用.addClass("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-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.tabs（）在垂直制表符下嵌套水平制表符？

3 个答案: