使用jQuery UI选项卡。如何将其中一个标签链接到URL而不是加载标签面板？

I am using jQuery UI tabs to create a vertical tab section of a page, and want the last vertical tab to link out to a URL rather than load a tab panel.

我正在使用jQuery UI选项卡来创建页面的垂直选项卡部分，并希望最后一个垂直选项卡链接到URL而不是加载选项卡面板。

Any suggestions for the best way to do this? I can stick another element besides an LI into the list, but would rather have the last li just behave differently.

有关最佳方法的建议吗？我可以将除了LI之外的另一个元素添加到列表中，但是宁愿让最后一个元素表现得不同。

Thanks for any help.

谢谢你的帮助。

Here's my javascript:

这是我的javascript：

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

And HTML

和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 个解决方案

#1

After your .tabs() call you can reverse the click behavior and href it changed, putting the href back like this:

在.tabs（）调用之后，你可以反转点击行为并将其更改为href，将href放回原样：

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

You can give it a try here.

你可以在这里尝试一下。

Update: Using newer versions of jQuery:

更新：使用更新版本的jQuery：

There is no need to add a click handler once you unbind jQuery-UI's click handler from the link you want to change. This will work:

从您想要更改的链接解除绑定jQuery-UI的单击处理程序后，无需添加单击处理程序。这将有效：

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

#2

You can change the select method of the tabs:

您可以更改选项卡的选择方法：

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

$（“。selector”）。tabs（{select：function（event，ui）{...}}）;

and compare ui.tab.id (or ui.panel.id, based on the markup you are using) to the id of the tab you want to send, and use location.href=... to redirect the user.

并将ui.tab.id（或ui.panel.id，基于您正在使用的标记）与要发送的选项卡的ID进行比较，并使用location.href = ...重定向用户。

#1