javascript - jQuery UI メニューで addClass を使用する

Question

ナビゲーション目的でjQuery UI Menuを使用しています。あるアイテムをクリックすると背景色が変わり（アクティブな状態を表示するため）、ユーザーが他のアイテムをクリックすると新しいアイテムの色が変わり、前のアイテムの色が元に戻るようにします。

そのためにaddClassを使用しましたが、どういうわけか機能していません。どこが間違っているのか教えてください。

フィドルリンク

HTML:

<ul id="menu" class="nav">              
   <li><a href="#" >Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
   <li><a href="#">Item 5</a></li>
   <li><a href="#">Item 6</a></li>
</ul>

CSS:

.selected{
    color:red;
}

jQuery

  $(function() {
    $( "#menu" ).menu();
  });
  $(function () {
  $(".nav a").click(function () {
    $(this).parent().addClass('selected'). // <li>
      siblings().removeClass('selected');
  });
  });