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

Mic*_*ael 20 jquery tabs jquery-ui jquery-ui-tabs

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

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

谢谢你的帮助.

这是我的javascript:

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

和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>
Run Code Online (Sandbox Code Playgroud)

Nic*_*ver 27

.tabs()通话结束后,您可以撤消点击行为并将href其更改,href如下所示:

$("li.last a").unbind('click').click(function() {
  this.href = $.data(this, 'href.tabs');????
});
Run Code Online (Sandbox Code Playgroud)

你可以在这里尝试一下.

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

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

$("li.last a").unbind('click');
Run Code Online (Sandbox Code Playgroud)

  • 要使用jQuery 1.8.2/jQuery UI 1.9.0,只需使用`$("li.last a").unbind('click')`.答案中的示例适用于早期版本的jQuery,但由于某种原因,添加的单击处理程序在最新版本中搞砸了. (3认同)