What is the opposite of CLICK event?

Question

I had a list <li> where the content inside li should get bold when it is clicked. For that i used the following code

HTML

  <ul class="tabs">
        <li><a href="#tab1" style="padding-left:5px;">All Sectors</a></li>
        <li><a href="#tab2">Information Technology</a></li>
        <li><a href="#tab3">Manufacturing</a></li>
        <li style="border-right:none;"><a href="#tab4">Services</a></li>        
  </ul>

JQUERY

$(document).ready(function() {
    $(".tabs li a").click(
        function() { $(this).css({ "font-weight" : "bold" }); }     

    );

});

But When the list item is clicked it gets bold. I want the list item to get back to normal when the other list item is clicked. I am not able to find the correct event. Your help will be greatly appreciated.

Answer 1

Maybe set the other items to normal before setting the clicked item to bold? I'm not the greatest with jQuery so this code my be utter crap :-)

$(document).ready(function() {
    $(".tabs li a").click(
        function() { 
           $(".tabs li a").css({ "font-weight" : "normal" }); 
           $(this).css({ "font-weight" : "bold" }); 
        }     
    );
});

Answer 2

Maybe you could do this ?

$(document).ready(function() {
    $(".tabs li a").click(
        function() { 
           $(".tabs li a").css({ "font-weight" : "normal" });
           $(this).css({ "font-weight" : "bold" }); }     

    );

});

Answer 3

Don't use CSS directly for this. Use classes:

a.bold { font-weight: bold; }

with:

$("ul.tabs > li> a").click(function() {
  $(this).closest("ul.tabs").children("li").children("a.bold")
    .removeClass("bold").end().addClass("bold");
  return false;    
});

Direct CSS changes are destructive. You can't roll them back. Classes on the other hand can be freely added and removed in a non-destructive manner and lead to better solutions (assuming the CSS property values aren't dynamic).

Answer 4

It would actually be easier to do this at the <li> level rather than the <a> since it would have the same bolding effect (and direct access to .siblings()), like this:

$(".tabs li").click(function() {
  $(this).addClass("boldClass").siblings().removeClass("boldClass");
});

Then you can use CSS for the class like this:

.boldClass { font-weight: bold; }

Instead of .addClass("boldClass") you could use .toggleClass("boldClass") if you want a click on an already-bold link to un-bold it.

Answer 5

Although all the above suggestion will work, my recommended solution is much simpler. JavaScript is behavioural so it should be just used for that. So I would suggest adding a class to the parent li when the a is clicked. You should just toggle a class:

JS

​$('.tabs li a').click(function()​​​​​ {
    $(this).parent().toggleClass('bold');
    return false;
});​​​​​​​​​​​

CSS

.bold a {
    font-weight: bold; 
}​

Example: http://jsfiddle.net/XWdVe/