toggle elements jquery
<p>I have a three <code>a</code> tags on a page. User can "select" only one.
Markup:</p>

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

<p>JS code:  </p>

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

<p>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.<br>
Where is a problem and why?<br>
Thanks.</p>

<p><a href="http://jsfiddle.net/28wzk/" rel="nofollow">DEMO</a></p>
