changing the font to bold on a HTML unsorted list

Question

I have a HTML unsorted list which I capture its “on click” event. When a list item is clicked on I want to change that items font setting to bold so that the user gets a visual indicator that it’s been selected. Is this possible?

Answer 1

<li onclick="this.style.fontWeight= 'bold'">​​​​​​​​​​​​​​​​​​​​​​​​​​​

Or do you want to change it back to regular when another li is clicked? I think you should use jQuery then (it's possible in regular javascript but this is just so much easier)

$('li').click(function () {
    $(this).siblings('li').css("fontWeight", "normal");
    $(this).css("fontWeight", "bold");
});​

Or even easier, just add a class:

CSS: .selected { font-weight: bold } jQuery:

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