Ajax Tabs, image positioning menu bar, and selected link

[dekra]

1) Script Title: Ajax Tabs Content Scripts v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem:

I recently implemented the above script on a new site without issues. I went back to implement on an existing site, and while the functionality works, I can't figure out how to dynamically have the selected content tab change. The menu bar uses css positioning and a single image for all the state properties. My question is how do I call on the proper css class when a tab is selected to have the pressed state of the buttons?

http://sandbox.gc-worldwide.com/

Click on the gallery link to see how I want the button to look.

Thanks.

[dekra]

Can anyone figure this out?

[ddadmin]

It depends on how you're getting the tab to actually appear depressed- are you using two separate background images, one for the default, the other, for the depressed state? In general the script applies the CSS class "selected" to the active tab, so you can for example define the depressed background image inside this CSS class. Demo #3 on the script page shows how this is done.

CSS cannot however, actually swap one foreground image with another, in other words, the src property of an image.

[dekra]

It's just one image, and a. properties are defined using fixed positioning. Here is the current css used for the on states:

/* ON STATES */
#globalheader.profile #globalnav li#nav-profile a { background-position: 0 -101px !important }
#globalheader.croatia #globalnav li#nav-croatia a { background-position: -101px -101px !important; }
#globalheader.montenegro #globalnav li#nav-montenegro a { background-position: -202px -101px !important; }
#globalheader.services #globalnav li#nav-services a { background-position: -303px -101px !important; }
#globalheader.theteam #globalnav li#nav-theteam a { background-position: -404px -101px !important; }
#globalheader.gallery #globalnav li#nav-gallery a { background-position: -505px -101px !important; }
#globalheader.contacts #globalnav li#nav-contacts a { background-position: -606px -101px !important; }

What happens is when the page refreshes, the request variable is set to define which button is active, which modifies the menu part of the page here:

		<div id="globalheader" class="profile">
			<ul id="globalnav">
				<li id="nav-profile"><a href="/profile/"></a></li>
				<li id="nav-croatia"><a href="/croatia-dmc/"></a></li>
				<li id="nav-montenegro"><a href="/montenegro-dmc/"></a></li>
				<li id="nav-services"><a href="/dmc-services/"></a></li>
				<li id="nav-theteam"><a href="/the-team/"></a></li>
				<li id="nav-gallery"><a href="/gallery/"></a></li>
				<li id="nav-contacts"><a href="/contacts/"></a></li>
			</ul>
		</div>

The above class changes depending on what page is requested. I don't know how to modify this for the active content script which calls a single class for each menu change, whereas above has individual id's for each content change.

Any thoughts?