Question

I have numbers in <li> in a html page, the numbers represent the number of pages:

<ol id="numbers">

     <li class="idx">1</li>
     <li class="idx">2</li>
      ...
      ...
     <li class="idx">n</li>                         
</ol>

The number of pages are dynamical, how to use jQuery to bold the page number text which is clicked, while keep other page number texts in default font style? Do I must use a for loop to change the unselected one to default style when there is a new page number selected?

Answer 1

http://jsfiddle.net/qE3Qm/2/

Better solution is to have .active css class with styles for active page. And set it on click:

$('#numbers li').click(function() {
    $('#numbers li.active').removeClass('active');
    $(this).addClass('active');
});