旋轉JQuery UI選項卡

Question

一直試圖解決這一個小時，沒有運氣。

我已經設置了選項卡，它們正在旋轉，但選定的選項卡不會使用z-index在上面提出，但它不會工作。我以前使用過ui標籤，但從未旋轉過。下面是代碼：

CSS：

#featured { 
    height: 200px; 
    position: relative; 
    width: 310px; 
} 

#featured ul.ui-tabs-nav { 
    left: 365px; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0; 
    width: 180px; 
} 

#featured ul.ui-tabs-nav li { 
    color: #FFFFFF; 
    font-size: 12px; 
} 

#featured .ui-tabs-panel { 
    height: 186px; 
    overflow: hidden; 
    position: relative; 
    width: 380px; 
    z-index: 0; 
} 
#featured .ui-tabs-hide{ 
    display:none; 
} 
#featured li.ui-tabs-nav-item a { 
    background: none repeat scroll 0 0 #FFFFFF; 
    display: block; 
    height: 57px; 
    line-height: 15px; 
    outline: medium none; 
} 
#featured li.ui-tabs-nav-item a:hover{ 
    z-index: 999; 
} 
#featured li.ui-tabs-selected{ /*Selected tab style*/ 
    z-index: 999; 
} 
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    z-index: 999; 
} 

HTML：

<div id="featured" > 
    <ul class="ui-tabs-nav"> 
     <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://localhost/devilishkiss/images/featured/menu1.png" /></a></li> 
     <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://localhost/devilishkiss/images/featured/menu2.png" /></a></li> 
     <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://localhost/devilishkiss/images/featured/menu3.png" /></a></li> 
    </ul> 
    <!-- First Content --> 
    <div id="fragment-1" class="ui-tabs-panel" style=""> 
     <a href="http://www.lulu.com/content/466605"><img src="http://localhost/devilishkiss/images/featured/stuk.png" /></a> 
    </div> 
    <!-- Second Content --> 
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> 
     <a href="http://www.lulu.com/content/466605"><img src="http://localhost/devilishkiss/images/featured/jrabbit2011.png" /></a> 
    </div> 
    <!-- Fourth Content --> 
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> 
     <a href="http://www.lulu.com/content/466605"><img src="http://localhost/devilishkiss/images/featured/fg_feat.png" /></a> 
    </div> 
</div> 

JQuery的：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
     $("#featured > ul").tabs({fx:{opacity: "show"}}).tabs("rotate", 3000); 
    }); 
</script> 

所以我只想澄清標籤有被部分隱藏的圖像。當選項卡被選中時，我希望選項卡能夠升至所有內容的頂部以顯示完整圖像。

所有幫助表示讚賞 感謝 喬

Answer 1

一個錯誤，我點是$("#featured > ul").tabs。試試這個：

$("#featured").tabs({fx:{opacity: "show"}}).tabs("rotate", 3000); 

另外一個是，刪除所有類的標籤：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">tab 1</a></li> 
     <li><a href="#tabs-2">tab 2</a></li> 
     <li><a href="#tabs-3">tab 3</a></li> 
    </ul> 

    <div id="tabs-1"> 
     content 1 
    </div> 

    <div id="tabs-2"> 
     content 2 
    </div> 
    <div id="tabs-3"> 
     content 3 
    </div> 

</div> 

觀看演示在這裏：http://jsbin.com/uquyo3/

Answer 2

我使用同樣的方法。由於所選班級對列表項目進行了樣式設置，因此從技術上講，列表項目將始終位於其內容之後。我們的網站使用這個小縮略圖和底部流行的「圈子」縮略圖。對於圈子，我確保所選類在列表項下方級聯（基本上，確保所選項目類與常規背景圖片重疊）。而且，這對我來說可以讓選定的圖像與我放在LI標籤上的常規圖像重疊。 （我正在使用圖像精靈，因此第一個圖像是文件中位置爲0 0的灰色點，而第二個圖像是藍色點，在文件中顯示爲向下19個像素。我在CSS中使用的代碼（其中有很多其他代碼已經在我們的網站上的樣式這...這只是覆蓋）

#featured ul.circle li.ui-tabs-nav-item { 
    background: url('../images/site/selected-item-circle.png') 0 0 no-repeat !important; 
    height:18px; 
    width:18px; 
    float:left; 
    margin:0 0 0 7px; 
} 
#featured ul.circle li.ui-tabs-selected { 
    background:url('../images/site/selected-item-circle.png') 0 -19px no-repeat !important; 
    width:18px; 
    height:18px; 
    float: left; 
    margin:0 0 0 7px; 
}