使用jQuery UI选项卡.如何将其中一个标签链接到URL，而不是加载标签面板? [英] Using jQuery UI Tabs. How would I make one of the tabs link to a URL rather than load a tab panel?

问题描述

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

有什么建议最好的方法吗?我可以将LI之外的其他元素添加到列表中，但希望最后一个li的行为有所不同.

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.

感谢您的帮助.

这是我的javascript:

Here's my 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发生更改，将href放回原处:

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

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

您可以在这里尝试一下.

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

从要更改的链接中取消绑定jQuery-UI的点击处理程序后，无需添加点击处理程序.这将起作用:

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:

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

这篇关于使用jQuery UI选项卡.如何将其中一个标签链接到URL，而不是加载标签面板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！