Changing background color with jQuery tools

I’m using this set-up:

Works ok (with a bit more CSS to do):

However, what I now need is for the background color to change with each tab change. There is a bit of explanation on jQuery events here: But to be honest it doesn’t mean much to me.

I’ve added data-bgcolor=“#FF0000 to each of the image layers, and then tried adding this script

	 onClick: function(event,tabIndex){
     var bg = $(event.element).data('bgcolor');
     $('body').css('background-color', bg);

Doesn’t work:

I would be grateful for any help, because I’m not fluent with JS at all, although I’m quite ok with HTML/CSS :wink:

Many thanks.

The standard way of doing that is to remove a class name of “selected” from all the tabs, and then to add “selected” to the one that is currently selected.
That way you can use CSS to style the selected tab in the manner that it shoudl be styled, which helps to keep the presentational aspect of things right where it belongs.

Thanks for the reply. Sorry if that wasn’t clear, but
I’m not looking to change the style of each tab,
but the background color of the whole page, i.e. BODY tag.

I don’t think that an event object has a property called element.
Try using instead.