how to make jquery react when class changes

Question

I have a simple Tab Navigation with jquery. Whenever a new tab is clicked, the script adds to the current navigation list element the class "currentNav" and deletes it from the previous selected list element. Now I want to change the background of the mother ul whenever the second list element gets the class "currentNav". The start default is that the first list element has this class. My problem is, I don't know how I can make jquery react on that change..

Here is the html of the navigation

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

And here my jquery so far

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

I appreciate any help! Thx!

With jQuery, you can just add it to the toggleClass code, can we see it? — Phil
– Phil, Commented Jul 12, 2011 at 16:31

SeanCannon · Accepted Answer · 2011-07-12 18:09:13Z

3

Set a trigger and a bind:

// 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)");
});

I know your example only has two <li> tags, but this will scale easily while keeping the first <li> the "resetter"

edited Jul 12, 2011 at 18:09

answered Jul 12, 2011 at 16:33

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sebsemillia Over a year ago

thx! it works perfect.. but one more question, how can I get the default background-image back if someone clicks again on the first li element?

Sebsemillia Over a year ago

Thank you very much!! I had to exchange the "this" in the section with the li:first-child with ul#AuktionenNav but now it works perfect! I really appreciate your help! :)

SeanCannon Over a year ago

Missed that in the c/p. Thanks :)

David Thomas · Accepted Answer · 2011-07-12 16:37:06Z

1

One way of doing this is to use the DOM mutation events:

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

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

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

JS Fiddle demo.

answered Jul 12, 2011 at 16:37

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2011-07-12 16:35:00Z

0

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

answered Jul 12, 2011 at 16:35

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

3 Comments

David Thomas Over a year ago

A demo of what? Please bring your code in-line with the question and answer.

Roko C. Buljan Over a year ago

Thanks David... I was just adding it, wait still 15 sec.

Roko C. Buljan Over a year ago

@Sebsemillia glad you make it work! Happy coding and don't forget to take a coffe break sometimes! ;)

Collectives™ on Stack Overflow

how to make jquery react when class changes

3 Answers 3

3 Comments

Comments

HERE IS A DEMO

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related