JQuery UI Tab selecetion не работает должным образом

Question

Я пытаюсь реализовать вкладки JQuery на моей странице. Но проблема заключается в том, что когда я нажимаю на вкладки, пользовательский интерфейс вкладок не изменяется. Выбранная вкладка всегда остается выбранной, а вкладка невыбранная всегда не выбрана. Я не могу понять, какая вкладка действительно нажата. Так как я использовал «привязку» для привязки события click на вкладках, реализация работает как ожидалось. Поскольку я совершенно не знаком с материалом JQuery UI, я не в состоянии выяснить, куда я иду не так.

Вот код jsp для вкладок (записанных, как указано в сети).

<div id="tabs" style="margin-top: 100px; width: 100%;margin-left:20%;"> 
    <ul> 
     <li id="allocated"><a href="#tabs-1">Allocated</a></li> 
     <li id="pending"><a href="#tabs-2">Pending</a></li> 
    </ul> 
</div> 

В JavaScript Файл:

$('#tabs',container).tabs(); 

Я написал другое событие связывания для обоих вкладках следующим образом:

$("#allocated", container).unbind("click").click(function() { 
}); 

$("#pending", container).unbind("click").click(function() { 
}); 

Мне нужно изменить состояние вкладок вручную делать или он должен измениться сам по себе.

Answer 1

Там нет контента для отображения ваших вкладок, вот почему это не работает должным образом:

<div id="tabs" style="margin-top: 100px; width: 100%;margin-left:20%;"> 
    <ul> 
     <li id="allocated"><a href="#tabs-1">Allocated</a> 
     </li> 
     <li id="pending"><a href="#tabs-2">Pending</a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
    </div> 
</div> 

И нет необходимости указывать container в вашем селекторе:

$('#tabs').tabs(); 

» Live Demo

Answer 2

Почему вы не являетесь ng событие click? Это остановит событие click, добавленное $('#tabs').tabs();. Если вы хотите сделать пользовательские действия по щелчку, вам просто нужно определить щелчок:

$("#allocated", container).click(function() { 
    alert(1); 
}); 

$("#pending", container).click(function() { 
    alert(2) 
});