I am developing ui tabs, but having problem with the tab that its working properly when I newly click on tab , when I again click on another tab its not working properly.

Here is my code.

```
<div class="tabs">
    <ul class="tab-head">
        <li class="head tab-act">tab 1</li>
        <li class="head">tab 2</li>
        <li class="head">tab 3</li>
    </ul>
    <div class="tab-content tab1 act-tab">tab content 1</div>
    <div class="tab-content tab2 ">tab content 2</div>
    <div class="tab-content tab3">tab content 3</div>
</div>

```

And jquery

```
$('.tab-head').on('click', 'li', function (e) {
    var curIndex = $(this).index();
    $('.tab-act').removeClass('tab-act');
    $('.tab-content').removeClass("act-tab");
    $(this).addClass('tab-act');
    $('.tab-content').eq(curIndex).slideDown(1000).addClass('act-tab');
});

```

Thanks for your support.