20

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.

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.

Thanks for any help.

Here's my javascript:

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

And 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>
Michael
  • 223
  • 1
  • 2
  • 6

2 Answers2

27

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');​​​​
});

You can give it a try here.

Update: Using newer versions of 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:

$("li.last a").unbind('click');
The Maniac
  • 2,628
  • 3
  • 19
  • 29
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 3
    To make this work with jQuery 1.8.2/jQuery UI 1.9.0, just use `$("li.last a").unbind('click')`. The example in the answer worked great for earlier versions of jQuery, but for some reason the added click handler was messing things up in the latest version. – Spectre87 Oct 24 '12 at 13:53
  • Alex is absolutely correct, this answer should be edited to include this information. – The Maniac Jan 31 '13 at 21:58
  • 1
    I know this question is older but I thought this was an important note. If you are looking to go to an external link instead of just load one you need a click handler and it's working fine for me with jquery-ui-1.10.3. Instead of this.href, you replace it with Location.href. In my case I wanted to make a tab a logout button. – Codeguy007 May 18 '13 at 13:47
  • I couldn't get this code to work... I had to use: `$("li:last a").unbind('click');` To only affect the tab, I used: `$('#tabID > ul > li:last a').unbind('click');` – James Moberg Jun 28 '13 at 01:04
  • 1
    You saved a whole lot of Trouble. Thanks a lot. – Arin Chakraborty May 13 '14 at 21:27
  • Thanks- this helped out a lot. @JamesMoberg - I just gave the tab in question an id, such as Site Map. then all i needed was $("#mapLink").unbind('click'); – Jamie M May 16 '14 at 14:01
  • Using jQuery UI 1.8.16, I had to change the added `click` event to instead use `each` to reassign the `href` from the data attribute, but then it worked. – David Harkness May 11 '16 at 00:00
0

You can change the select method of the tabs:

$( ".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.

partkyle
  • 1,458
  • 1
  • 15
  • 25
  • where is this documented? http://api.jqueryui.com/tabs/ currently does not say anything about this for tabs... – jave.web Sep 21 '16 at 09:50
  • 1
    This is something that may have been valid in 2010 when I wrote this, but I haven't kept up with jQuery, so I'm not sure. Good Luck. – partkyle Sep 22 '16 at 20:08
  • thanks for the info, in the end I ended up making my own "tabs" little-script, because I also didn't want the styling, so I solved 2 problems in one **short** soulution - http://stackoverflow.com/a/39621077/1835470 – jave.web Sep 23 '16 at 13:16