Hey,
I have a page going here that uses jQuery: http://treethink.com/services
What I am trying to do is, if a slide or sub-page is shown in there, change the background colour and colour of the button.
To do this I tried saying, if a certain div is shown, the background colour of a certain button changes. However, you can see there that it isn't working properly, it is changing the colour for the web one but not removing the colour change and adding a colour change on a different button when you change pages.
Here is the overall code:
/* Hide all pages except for web */
$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
/* When a button is clicked, show that page and hide others */
$("#services #web-button").click(function() {
$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
});
$("#services #print-button").click(function() {
$("#services #print-block").show();
$("#services #web-block").hide();
$("#services #branding-block").hide();
});
$("#services #branding-button").click(function() {
$("#services #branding-block").show();
$("#services #web-block").hide();
$("#services #print-block").hide();
});
/* If buttons are active, disable hovering */
if ($('#services #web-block').is(":visible")) {
$("#services #web-button").css("background", "#444444");
$("#services #web-button").css("color", "#999999");
}
if ($('#services #print-block').is(":visible")) {
$("#services #print-button").css("background", "#444444");
$("#services #print-button").css("color", "#999999");
}
if ($('#services #branding-block').is(":visible")) {
$("#services #branding-button").css("background", "#444444");
$("#services #branding-button").css("color", "#999999");
}
Thanks,
Wade
