小编Bob*_*ler的帖子

我试图用jQuery嵌套标签,一些水平和一些垂直.我发现谷歌代码"垂直标签"项目在这里,并把它纳入我的项目.我的(简化)HTML是:

<div class="htab-outer">
  <ul>...</ul>
  <div class="vtab">
    <ul>...</ul>
    <div class="htab-inner">
      <ul>...</ul>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

我的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 …