0

<body>どのタブ固有がアクティブであるかに応じて、の背景色を変更しようとしています。

タブがアクティブになると、「st_view_active」というクラスがタブのコンテンツに追加されます。タブのコンテンツに、タブがアクティブなときに体の背景色がどうあるべきかを示す16進コードを含む非表示のdivを追加します。jQueryコードは次のようになります。

$(document).ready(function() {
    $(function(){
         $('body').css('backgroundColor',$('.st_view_active').find('.background').text());
     });
 });

そして、タブがアクティブなときの私のhtmlコードは次のとおりです。

<div class="tab-6 st_view st_view_active" >
   <div style="display:none" class="background">yellow</div>
   <div class="st_view_inner">
        tab 6
    </div>
</div>

したがって、tab6がアクティブな場合、ボディの背景は黄色になります。しかし、これは機能しておらず、背景色も変化していません。ここで何が間違っているのでしょうか。

デモとJSfiddle

ありがとうPS：赤と青の四角は、次の前のタブハンドラーです。

4

4 に答える 4

2

ここを参照してください：http：//jsfiddle.net/CNYDU/25/

の最後にデフォルトの色を付けましたがsColor、代わりに最初のビューを取得してその色を使用することもできます。あなたのフィドルを扱うのは苦痛なので、私はテストを減らすためにこのようにしました。

$(document).ready(function() {
    var hsh = window.location.hash.replace('#','');
    var sColor = hsh ? $("#slidetabs_45").find("."+hsh+" .background").text() : "#3b0";
    $("body").css("background-color", sColor);

    $("#slidetabs_45").slidetabs({
        onContentVisible:function(e){
            var color = $("#slidetabs_45").find(".st_view_active .background").text();

            $("body").css("background-color", color);
        }
    });       
});

.st_view_activeまた、クラスが正しく開始されるように、最初のビューにクラスを追加しました。

また、CSS3トランジションを背景色に追加しましたが、これは不要です。

于 2012-11-19T23:20:55.747 に答える
0

これは、htmlでデータ要素を使用する絶好の機会のように思えます。必要な背景色で非表示のdivを使用するのではなく、タブタグにdata-color属性を追加するだけで済みますa。次に、divをクリックすると、イベントハンドラーを使用して色を簡単に設定できます。

更新されたフィドルへのリンク-http://jsfiddle.net/CNYDU/15/

注：この例では、次のタブと前のタブは機能しませんが、実行する各タブにリスナーをアタッチするだけで、簡単に機能させることができます。

$('body').css('background-color', $(".st_tab_active").attr('data-color'));

そのコールバックとして。

于 2012-11-19T22:54:52.673 に答える
-1

jQueryのlivequeryプラグインを確認してください。

Live Queryには、新しい要素と一致したときに関数（コールバック）を起動し、要素が一致しなくなったときに別の関数（コールバック）を起動する機能もあります。これにより、究極の柔軟性と未知のユースケースが提供されます。たとえば、次のコードは、関数ベースのLive Queryを使用してjQueryホバーヘルパーメソッドを実装し、要素が一致しなくなったときにそれを削除します。

彼らの例：

$('li') 
.livequery(function(){ 
// use the helper function hover to bind a mouseover and mouseout event 
    $(this) 
        .hover(function() { 
            $(this).addClass('hover'); 
        }, function() { 
            $(this).removeClass('hover'); 
        }); 
}, function() { 
    // unbind the mouseover and mouseout events 
    $(this) 
        .unbind('mouseover') 
        .unbind('mouseout'); 
});

これを、起動されたイベントなどのcssの変更に適応させることができるはずです。そのため、アクティブなタブに基づいてアクションを実行します。

このプラグインの使用方法のデモのために、data属性を使用するJlangeの jsfiddleをフォークしました。

そして関連するビット：

$('.st_tabs_ul li a.st_tab_active').livequery(function(){ 
    $('body').css('background-color', $(this).data('color'));
});
于 2012-11-19T22:49:43.307 に答える
-2

あなたのタブにIDを置きます。id = "tab6"の例：

$(document).ready(function() {
   if ($('#tab6').attr('class') == 'tab-6 st_view st_view_active') {
      $('body').css('background-color', 'yellow');
   }
});

しかし、なぜこの関数をドキュメントレディのみにアタッチするのでしょうか。要素がクリックされたときに関数をバインドします...

于 2012-11-19T22:36:38.437 に答える