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

Question

我正在使用 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>

Answer 1

在 .tabs() 调用之后，您可以反转点击行为，并且 href 发生变化，将 href 放回原处，如下所示:

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

You can give it a try here .

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

一旦您从要更改的链接取消绑定(bind) jQuery-UI 的单击处理程序，就无需添加单击处理程序。这将起作用:

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