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

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.