Question

My navigation has 5 buttons [Home, About, Services, Events, Contact] and each button has a background image of “blue-button.png”. I want to switch it to “white-button.png” when the user is in that section. I wish it were as simple as a:active, but it’s not and i’ll explain why;

All of the content is displayed in an overlay. The way the website is built, you never leave the index page, but the content is loaded into the index page. This is why the a:active doesn’t work.

Now for example, when the user opens the “About” page, the content (which I will call “About Main”) appears, and has links to “About-Me”, “About-You”, and “FAQ”. I want the “About” button to change background images (to white) whenever the user is in any of the areas that pertain to “About” (About Main, About me, About you, FAQ)… I also want the button to change back to blue when the user goes to a different section (EX: Contact) and then have the Contact button become white.

The only way I’ve noticed to tell where the user is, is that the overlay they are on has a css style of display:block while all the others are hidden with display:hidden…

So, I was thinking javascript similar to this:

if (About Main, About Me, About You, FAQ) is display:block
{ $(".about").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".about").css('background-image', 'url(../img/blue-button.png)' }

if (contact) is display:block
{ $(".contact").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".contact").css('background-image', 'url(../img/blue-button.png)' }

the navigation buttons have Classes like:
<a class="about">
<a class="contact">

while the overlays have IDs like:
<div class="simple_overlay" id="about">
<div class="simple_overlay" id="contact">

I know it’s a lot of information but hopefully someone can help me clear up the specifics, I’m not very good with javascript…
Heres a link to the site if you want to look to get a better understanding

Thank you so much for your time in advance, This one is really killing me!

Answer 1

You’re better off just adding and removing a .selected class from each of your links when you click on them. Then set the .selected class to have a background image of white-button.png. You would need to add click handlers to your navigation links so it would first remove any existing .selected classes from all of them, and then add .selected to the link you clicked on.

CSS

.navigation a.selected
{
  background-image: url(../img/white-button.png);
}

Javascript – I see you’re using jQuery so that makes this easy. Add the code below to your initialization section. I haven’t tested this script but it should be pretty close.

// Add click event handler to all navigation links
$('.navigation a').click(function() {
  // First remove selected class from all navigation links
  $('.navigation a').removeClass('selected');  
  // Now add the selected class to the current link
  $(this).addClass('selected');
});

EDIT: I tweaked this a little and added a jsfiddle for you to see it in action:
http://jsfiddle.net/VCaSV/