Question

I have a three a tags on a page. User can “select” only one.
Markup:

<div class="fl_near">
  <span class="title">title</span>
  <p>
    <a id="filter_today" class="first_tb" style="display: block">
      <span>text1</span>
    </a>
    <a id="filter_tomorrow">
      <span>text2</span>
    </a>
    <a id="filter_afterTomorrow" class="last_tb selected" style="display: block">
      <span>text3</span>
    </a>
  </p>
</div>

JS code:

$('.fl_near').find('a:not(.selected)').click(function () {
    alert('1');
        $('.fl_near').find('a').removeClass('selected');
        $(this).addClass('selected');
    });

This code not works properly. If I select first or second tag then all OK – style is switched, but alert shows anyway. If I select first then I can’t select the last.
Where is a problem and why?
Thanks.

DEMO

Answer 1

Because you don’t bind click handler to the last element.

Try

$('.fl_near a').click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});​