Rajasekar Rajasekar - 12 days ago 7
CSS Question

What is the opposite of CLICK event?

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

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.

Comments