可能/如何使用jquery.tabs（）在垂直標籤下嵌套水平標籤？

Question

我試圖嵌套與jQuery，一些水平和一些垂直的標籤。我在谷歌代碼here上找到了「垂直製表符」項目，並將其納入我的項目。我（simpified）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-外部「和」htab內部「應水平渲染，而」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的標籤樣式的解決方案。

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