使用jQuery UI选项卡 如何使一个选项卡链接到URL而不是加载选项卡面板？

我正在使用jQuery UI标签来创建一个页面的垂直标签页，并希望最后一个垂直标签链接到一个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>

解决方法

在你的.tabs()调用之后，你可以反转点击行为，并改变它，改为href，如下所示：

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

You can give it a try here。

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

一旦您从要更改的链接中取消绑定jQuery-UI的点击处理程序，就不需要添加点击处理程序。这将工作：

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