Использование вкладок пользовательского интерфейса 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>
2 ответа
После вызова .tabs () вы можете изменить поведение щелчка и href оно изменилось, вернув href вот так:
$("li.last a").unbind('click').click(function() {
this.href = $.data(this, 'href.tabs');
});
Обновление: Использование более новых версий jQuery:
Нет необходимости добавлять обработчик кликов после отмены привязки обработчика кликов jQuery-UI для ссылки, которую вы хотите изменить. Это будет работать:
$("li.last a").unbind('click');
Вы можете изменить метод выбора вкладок:
$ (".selector") .tabs ({
select: function (event, ui) {...}
});
и сравните ui.tab.id (или ui.panel.id , в зависимости от используемой разметки) с идентификатором вкладки, которую вы хотите send и используйте location.href = ... для перенаправления пользователя.