Add and remove class on click explanation
I found a way to get it to work, but I wonder why the code I first came up with didn't work at all.
-
/* does work */
$('#navigatie li').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
});
/* doesn't work */
$('#navigatie li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
It doesn't really make sense to me why the bottom version doesn't work properly. It does add the 'active' class everytime you click it. But it fails to remove the other classes, even though its supposed to check its siblings for it?
I must be overlooking something really simple. It would be great if someone could tell me why the bottom version doesn't remove all the other 'active' classes from the li's when you click on it?