1

jqueryを使用した単純なタブナビゲーションがあります。新しいタブがクリックされるたびに、スクリプトは現在のナビゲーションリスト要素にクラス「currentNav」を追加し、前に選択したリスト要素からそれを削除します。ここで、2番目のリスト要素がクラス「currentNav」を取得するたびに、マザーulの背景を変更したいと思います。開始のデフォルトでは、最初のリスト要素にこのクラスがあります。私の問題は、jqueryをその変更に反応させる方法がわからないことです。

これがナビゲーションのhtmlです

<ul id="AuktionenNav">
                    <li><a class="tabSelect one currentNav" href="#Tab0" rel="0">Auktionen starten</a></li>
                    <li><a class="tabSelect two" href="#Tab1" rel="1">Eingestellte Auktionen</a></li>
                </ul>

そしてここでこれまでの私のjquery

if($("ul#AuktionenNav li a.two").hasClass("currentNav")) {
        $("ul#AuktionenNav").css("background-image", "url(../system/css/images/eingestellte_Auktionen.png)")
    }

助けてくれてありがとう！どうも！

4

3 に答える 3

3

トリガーとバインドを設定します。

// When an <li> (NOT the first one) is clicked, tell the <ul>
$('ul#AuktionenNav li').not(':first-child').click(function(){ 
    $(this).trigger('li_clicked'); 
});

// When the FIRST <li> is clicked, reset the background
$('ul#AuktionenNav li:first-child').click(function(){ 
    $('ul#AuktionenNav').css("background-image", "url(../system/css/images/default.png)");
});
// Listen for an <li> click
$('ul#AuktionenNav').bind('li_clicked',function(){
    $(this).css("background-image", "url(../system/css/images/eingestellte_Auktionen.png)");
});

あなたの例には<li>タグが2つしかないことは知っていますが、これは最初<li>の「リセット」を維持しながら簡単に拡張できます

于 2011-07-12T16:33:05.773 に答える
1

これを行う1つの方法は、DOMミューテーションイベントを使用することです。

$('ul').bind('DOMSubtreeModified',

function() {
    $(this).closest('ul').addClass('red');
});

$('#toggle').click(
    function(){
        $('ul li:nth-child(2)').toggleClass('highlight');
        return false;
    });

JSフィドルデモ。

于 2011-07-12T16:37:06.337 に答える
0

ここにデモがあります

$('ul#AuktionenNav li a').click(function() {
    $(this).addClass('currentNav');
    if ($("ul#AuktionenNav li a.two").hasClass("currentNav")) {
        $("ul#AuktionenNav").css("background-image", "url(../system/css/images/eingestellte_Auktionen.png")
    }
});
于 2011-07-12T16:35:00.207 に答える