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

Я использую вкладки пользовательского интерфейса 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>

Ответ 1

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

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

Вы можете попробовать здесь.

Обновление: использование новых версий jQuery:

Нет необходимости добавлять обработчик кликов, как только вы отмените обработчик jQuery-UI-кликов по ссылке, которую хотите изменить. Это будет работать:

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

Ответ 2

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

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

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