Использование вкладок пользовательского интерфейса 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=...
для перенаправления пользователя.