类更改时如何使jquery做出反应

Question

我有一个简单的带有 jquery 的标签导航。每当单击新选项卡时，脚本都会将类“currentNav”添加到当前导航列表元素，并将其从先前选择的列表元素中删除。现在，每当第二个列表元素获得类“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)")
    }

感谢您的帮助！谢谢！

Answer 1

设置触发器和绑定：

// 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> 标记，但这将很容易扩展，同时保持第一个 <li> 为“重置器”

Answer 2

一种方法是使用 DOM 突变事件：

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

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

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

JS Fiddle demo.

Answer 3

HERE IS A DEMO

$('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")
    }
});