I'm currently using the following code for my menu items:

HTML

<li>
<a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
<a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
<a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

I need to get the buttons to remain in the 'active' state after they're clicked and the page loads/refreshes etc.

If the solution requires javascript, please bear in mind that I'm a rank amateur so I'll need any explanations in layman's terms (preferably with examples).

I'm currently using the following code for my menu items:

HTML

<li>
<a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
<a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
<a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

I need to get the buttons to remain in the 'active' state after they're clicked and the page loads/refreshes etc.

If the solution requires javascript, please bear in mind that I'm a rank amateur so I'll need any explanations in layman's terms (preferably with examples).

• javascript
• html
• css
• button

• 6 I don't think this question deserve -1. – xiaoyi Commented Nov 30, 2012 at 17:27
• You want it to remain active until the page loads, or even after the page loads? The latter requires you to get the URL with javascript (not impossible). – bozdoz Commented Nov 30, 2012 at 17:28
• The mon approach is to apply an additional class to the link that mimics the :hover, are you using PHP or anything? – Ryan B Commented Nov 30, 2012 at 17:29
• 1 Am I correct that you are looking for something like :visited? See also: hacks.mozilla/2010/03/… – No Results Found Commented Nov 30, 2012 at 17:41
• 2 I think that the only reliable approach is to use server-side scripting or cookies. – Matheus Azevedo Commented Nov 30, 2012 at 17:56

4 Answers 4

You need to identify the page you are currently on.

var page = window.location.href;
page = page.substr((page.lastIndexOf('/') + 1));
page = page.split('.');
page = page[0];
//At this point you will have the current page only with no extension or query paramaters
//I.E. "About Us"
page = page.toUpperCase();
//This accounts for upper or lower casing of urls by browsers.
switch(page) {
    case "ABOUT US":
        $('#About').addClass('< name of active button class >');
        break;
    case "SERVICES":
        $('#Services').addClass('< name of active button class >');
        break;
    case "CONTACT US":
        $('#Contact').addClass('< name of active button class >');
        break;
}

If you're not using jQuery replace this line:

$('#< element name >').addClass('< name of active button class >');

with this line:

document.getElementById("< element name >").className += " < name of active button class >";

Hope this helps.

Best just to stick to using CSS classes with some JS. This way you can mix both styles for the pseudoclass (:hover) as well as the CSS class.

$('.myButtonLink').click(function() {
  $(this).addClass('active_class');
});

Or if you want to toggle it.

$('.myButtonLink').click(function() {
  $(this).toggleClass('active_class');
});

This way if there any changes in your layout, you only have to update the CSS styles that are apart of that class and not have to update your JavaScript code.

You can use the window or localStorage element to keep stage across page refreshes.

var key = getStorageKeyFromLink(link);
window.activeStateLookup = window.activeStateLookup || {};
window.activeStateLookup[key] = {
  element : link
};

Now when your page loads you can just update all the images:

window.onload = function() {
  var lookup = window.activeStateLookup || {};
  for(var key in lookup) {
    var element = lookup[key].element;
    element.addClass('active_class');
  }
}

--- EDIT ---

Here's your DEMO.

The example uses localStorage, but it would work the same with the window object. Be sure to copy and paste the code and try it out on your local machine since jsfiddle has some blocks against what's going on.

http://jsfiddle/GDXLb/7/

You could use a little jquery to see what the url is, parse it and then re-apply the active class to the appropriate link.

I.E ( i haven't tested this... it's more of an idea...)

var path = window.location.pathname;

$(a).each(function(){
    if (path.indexOf($(this).prop("href")) > 0){
        $(this).child("button").addClass("active");
        break;
    }
});

$('.myButtonLink').click(function() {
 $(this).css('background-position', '0 0');
});

DEMO