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