What is the opposite of the CLICK event?

Question

I had a <li> list where the contents inside li should turn out to be bold when clicked. For this, 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 becomes bold. I want the list item to return to its normal state when clicking on another list item . I can not find the correct event. Your help will be greatly appreciated.

Answer 1

In fact, it would be easier to do this at the <li> level and not at the <a> , as it will have the same offset effect (and direct access to .siblings() ), for example:

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

Then you can use CSS for the class as follows:

 .boldClass { font-weight: bold; } 

Instead of .addClass("boldClass") you can use .toggleClass("boldClass") if you want to click on the already bold link to cancel it.

Answer 2

Perhaps set other items to normal before setting the highlighted item in bold? I'm not the best with jQuery, so this code will be complete shit to me :-)

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

Answer 3

Do not use CSS for this. Use classes:

 a.bold { font-weight: bold; } 

from:

 $("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 devastating. You cannot push them back. Classes, on the other hand, can be freely added and removed in a non-destructive manner and lead to better solutions (provided that the CSS property values ​​are not dynamic). A.

Answer 4

Maybe you could do it?

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

Answer 5

Although all of the above suggestion will work, my recommended solution is much simpler. JavaScript is behavioral, so it should just be used for this. Therefore, I would suggest adding a class to the parent element li when you click a. You just need to switch the class:

Js

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

CSS

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

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