I'm using [jQuery UI Menu](http://jqueryui.com/menu/) for navigation purpose. I want that when one item is clicked it's background color should change (to show active state) and when user clicks on other item then the new item's color should change and the previous one's color should revert back to original.

I used addClass for that but somehow it's not working, let me know where I'm doing wrong. 

[Fiddle link](http://jsfiddle.net/PaHXs/5/)

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');
  });
  });

```