I'm very new to jQuery.
I have two menu tabs, and am trying to get tab 'a' to toggle (switch) classes with tab 'b' upon click.
Using the .attr method doesn't seem to work. I've also tried switching it with the toggleClass but still nothing.
// toggle between login / register
$(".static-color").click(function() {
$("#login").hide();
$("#register").show();
$(this).attr("active-color");
$(".active-color").attr("static-color");
});
// toggle between login / register
$(".active-color").click(function() {
$("#login").show();
$("#register").hide();
$(this).attr("static-color");
$(".static-color").attr("active-color");
});
What you're actually doing with
.attr
is just getting the value of a supposedstatic-color
attribute which doesn't exist.The trick is using
.addClass
.removeClass
or in this case.toggleClass
.Another tip I have for you is to use event delegation with the
.on
jQuery method. This will allow for more flexible event handling. You are actually attaching the listener to a parent element which will listen for events coming from another element matching the specified selector, like this:Also, I see you have a bit of duplication, try to make your code more reusable. Don't Repeat Yourself!
I updated your fiddle: http://jsfiddle.net/h3Y6G/1/