0

これを1時間修正しようとしましたが、うまくいきませんでした。

タブを設定しましたが、それらは回転していますが、選択したタブは 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>

したがって、タブを明確にするために、部分的に非表示になっている画像があります。タブが選択されたら、タブをすべての上に上げて、完全な画像を表示します。

すべての助けに感謝ジョー

4

2 に答える 2

1

私はこれと同じアプローチを使用しています。選択されたクラスがリスト アイテムのスタイルを設定するため、技術的には、リスト アイテムは常にそのコンテンツの背後に配置されます。私たちのウェブサイトでは、小さなサムネイル画像と下部にある人気の「円」サムネイルの両方でこれを使用しています。円については、選択したクラスがリスト アイテムの下にカスケードされていることを確認しました (基本的に、選択したアイテム クラスが通常の背景画像に重なるようにしました)。そして、これは、選択した画像を、LIタグに付けている通常の画像と重ね合わせるのに役立ちました。(画像スプライトを使用しているため、最初の画像はファイル内の位置 0 0 にある灰色の点であり、2 番目の画像である青い点はファイル内で 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;
}
于 2012-11-16T22:30:04.673 に答える
0

私が見つけた1つの間違いは$("#featured > ul").tabs. これを試して：

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

もう 1 つは、タブのすべてのクラスを削除することです。

<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/

于 2011-03-27T13:11:42.190 に答える