How to keep a list element Highlighted after I click it?

This question is regarding the Highlighting of ListItems.

I am highlighting the list items by using following classes.

ul.category_list li {
  background: none repeat scroll 0 0 #B73737;
  border-bottom: 1px solid #CCCCCC;
  color: #953131;
  display: block;
  height: 29px;
  width: 242px;
}

ul.category_list li a:link,ul.category_list a:visited { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #fff; text-decoration: none; color: #666; }

    ul.category_list li a:hover { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5 url(../images/disc_apps/nav_over.jpg) no-repeat; text-decoration: none; color: #666; }

    ul.category_list li a:active { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5; text-decoration: none; color: #666;  }

Please refer this working example at http://jsfiddle.net/XMbAS/

Now, i want that, the clicked ele开发者_如何学JAVAment should stay highlighted unless i click other element.Currently it is not happening. please help me with that.If anything is possible with jquery then please let me know.

thank you

---

I changed your demo here:

http://jsfiddle.net/XMbAS/2/

Edit: This is just a straightforward and simple solution using CSS class. First you reset all elements with that class, and then you add it to clicked list element from your specific list.

Edit: Demo with hover included:
http://jsfiddle.net/balron/XMbAS/7/

In my script, I am only adding and removing one class, so all hover definitions should still work without problems. It all about CSS after all. Sorry for not doing it on your code, but I gave up trying to copy paste.. SO is really missing some copy with whitespace included. Also the jsfiddle wasn't listening to me when I was trying to modify your example.

---

The easiest way, with jQuery, is:

$('a').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).closest('li').addClass('highlight');

        // I'd use:
        // return false;
        // as well, but you've addressed that already, in your inline onclick handlers.

    });

JS Fiddle demo.

But this is without seeing the remainder of your JavaScript, or UI. So you'll possibly have to tailor it to your needs.

---

Revised the jQuery to better fit your needs, and to show the use of CSS :hover

$('li').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });

CSS:

li {
    background-color: #fff;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
}

.highlight,
li:hover {
    background-color: #ffa;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
}

Revised JS Fiddle, using CSS :hover pseudo-element

Alternatively, use jQuery's hover() method:

$('li').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });

$('li').hover(
    function(){
        $(this).addClass('highlight');
    },
    function(){
        $(this).removeClass('highlight');
    });

JS Fiddle demo, using the jQuery hover() method.

References:

• hover()
• addClass()
• removeClass()