how to make jquery react when class changes
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!
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"
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.
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")
}
});
精彩评论