jquery.tabs（）で縦のタブの下に横のタブをネストする方法はありますか？

Question

私は、いくつかの水平といくつかの垂直、jQueryでタブをネストしようとしています。私はGoogle Code hereの "vertical tabs"プロジェクトを見つけ、プロジェクトに取り入れました。私（simpified）HTMLは次のようになります。

$(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-

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

私はjavascriptのように見えます「外側」および「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"); 

EDIT： スタイルの変更をする：そのソリューションは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のタブスタイリング・ソリューションを与えました。

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;}