How to set clicked <a> tag style?

Problem

I found a menu sample, and want to use it in my site. When mouse enter menu item, its style changes, but when mouse leave menu item, its style is as previous style. User doesn't see which menu item is selected. It is css code part:

  .navigation ul#topnav li{
        width:auto;
        float:left;
        padding:0;
        position:relative;
    }
    .navigation ul#topnav li a{
        color:#fff;
        background-color:inherit;
        padding:0 7px;
        text-align:center;
        display:block;
        border-left:5px solid transparent !important;
        border-right:5px solid transparent !important;
        position: relative;
        z-index: 50;
    }
    .navigation ul#topnav li a:hover{
        color:#824d97;
        background-color:inherit;
        background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
        border-left:5px solid #6c1b93 !important;
        border-right:5px solid #6c1b93 !important;
    }

I want when mouse leave menu item after click, its style to be shown as hover, and user see which item is selected.

Problem courtesy of: Jhoon Bey

Solution

Update your third CSS selector to something like:

.navigation ul#topnav li a:hover, .navigation ul#topnav li a.selected {

...so that those settings apply both to the <a> being hovered over and any <a> with the class "selected". Or if you want the clicked link to have some variation on the hover styles add .navigation ul#topnav li a.selected { as a separate entry.

Then in your JS code when a link is clicked you add the "selected" class to it and remove the class from any others:

$("#topnav li a").click(function() {
    // whatever else you do on click, then

    $(this).addClass("selected");
    $("#topnav li a").not(this).removeClass("selected");
});

EDIT: Place that code in a $(document).ready() handler or in a script block at the end of the page.

Working demo: http://jsfiddle.net/VFJ7c/

Note: I was assuming (and I think the other answers assumed) that your menu was loading content via Ajax or showing and hiding existing content. If your menu has standard links that reload the entire page then this won't work and you'll need to either apply the "selected" class to the appropriate link in your server-side code or otherwise do it on DOM-ready rather than on click.

Solution courtesy of: nnnnnn

Discussion

since you're using Jquery you can do the following:

$(function(){
    $('.navigation ul#topnav li a').hover(
      function(){
        //remove the active class from all links on mouseover
        $('.navigation ul#topnav li a').removeClass('.active');
      },
      function(){
        //add active class to current link on mouseout
        $(this).addClass('active');
      }
    );
});

...then add styles for the active class in your css:

.navigation ul#topnav li a.active{
  /*your styles*/
}
Discussion courtesy of: Max Girkens

You have to use jquery for this.

$('.links').click(function(){
    $(this).addClass('clicked');
});

And then have a style for clicked links.

.clicked{
    color:red;
}
Discussion courtesy of: Hamed Momeni

You can also add a new style for the selected state:

    .navigation ul#topnav li a:selected{
     //Your Style Here
    }
Discussion courtesy of: Elie Zgala

Need to add the another class and add it to the element on click.

JS

$('.navigation ul#topnav li a').click(function(){
    $(this).addClass('active');
});

CSS

.navigation ul#topnav li a.active{
        color:#824d97;
        background-color:inherit;
        background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
        border-left:5px solid #6c1b93 !important;
        border-right:5px solid #6c1b93 !important;
    }
Discussion courtesy of: Jithin

Make javascript/jQuery code for it.

OnLoad/ready DOM

jQuery

$(".navigation ul#topnav li").click(function() {
     if($(this).hasClass("selected")) {
         $(this).removeClass("selected");
     } else {
         $(this).addClass("selected");
     } 
});

CSS

.navigation ul#topnav li.selected {
    background-color:#selectedcolor
}
Discussion courtesy of: Ankur Loriya

Try the below:

.navigation ul#topnav li a:visited{ 
    color:#824d97; 
    background-color:inherit; 
    background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important; 
    border-left:5px solid #6c1b93 !important; 
    border-right:5px solid #6c1b93 !important; 
}
Discussion courtesy of: HGK

This recipe can be found in it's original form on Stack Over Flow.