Использование вкладок пользовательского интерфейса jQuery. Как мне сделать одну из вкладок ссылкой на URL, а не загружать вкладку?

Question

Я использую вкладки пользовательского интерфейса jQuery для создания вертикальной вкладки страницы и хочу, чтобы последняя вертикальная вкладка привязывалась к URL-адресу, а не загружала панель вкладок.

Любые предложения по наилучшему способу сделать это? Я могу вставить еще один элемент, кроме LI, в список, но предпочла бы, чтобы последний li вел себя иначе.

Спасибо за любую помощь.

Вот мой JavaScript:

// vtabs 
    $("#aboutprod-tabs").tabs(
    { fx: [{opacity:'toggle', duration:'normal'}, 
    {opacity:'toggle', duration:'fast'}] }) 
    .addClass('ui-tabs-vertical'); 

И HTML

<div id="aboutprod-tabs"> 
    <ul> 
    <li><a href="#tabs-1">First</a></li> 
    <li><a href="#tabs-2">Second</a></li> 
    <li><a href="#tabs-3">3rd</a></li> 
    <li class="last"><a href="/products">Learn more...</a></li> 
    </ul> 
    <div id="tabs-1"> 
    Tab panel 1 
    </div> 
    <div id="tabs-2"> 
    Tab panel 2 
    </div> 
    <div id="tabs-3"> 
    Tab panel 3 
    </div> 
</div> 

Answer 1

После вашего .tabs() звонка можно полностью изменить поведение щелчка и href он изменил, поставив href назад, как это:

$("li.last a").unbind('click').click(function() { 
    this.href = $.data(this, 'href.tabs');​​​​ 
}); 

You can give it a try here.

Update: Используя новые версии JQuery:

Там нет никакой необходимости, чтобы добавить обработчик щелчка, когда вы отвязать обработчик нажатий JQuery-UI от ссылки, которую вы хотите изменить. Это будет работать:

$("li.last a").unbind('click'); 

Answer 2

Вы можете изменить выбор метода закладок:

$(".selector").tabs({ select: function(event, ui) { ... } });

и сравнить ui.tab.id (или ui.panel.id, основанную на разметке, которую вы используете) к идентификатору которую вы хотите отправить, и используйте location.href=... для перенаправления пользователя.