Using jQuery UI Tabs. How would I make one of the tabs link to a URL rather than load a tab panel?
16,884
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');
});
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');
Author by
Admin
Updated on June 06, 2022Comments
-
Admin almost 2 years
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>
-
Spectre87 over 11 yearsTo 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. -
The Maniac over 11 yearsAlex is absolutely correct, this answer should be edited to include this information.
-
Codeguy007 about 11 yearsI 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.
-
James Moberg almost 11 yearsI 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');
-
Arin Chakraborty about 10 yearsYou saved a whole lot of Trouble. Thanks a lot.
-
Jamie M about 10 yearsThanks- this helped out a lot. @JamesMoberg - I just gave the tab in question an id, such as <a id="mapLink" href="...">Site Map</a>. then all i needed was $("#mapLink").unbind('click');
-
David Harkness about 8 yearsUsing jQuery UI 1.8.16, I had to change the added
click
event to instead useeach
to reassign thehref
from the data attribute, but then it worked. -
jave.web over 7 yearswhere is this documented? api.jqueryui.com/tabs currently does not say anything about this for tabs...
-
partkyle over 7 yearsThis 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.
-
jave.web over 7 yearsthanks 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 - stackoverflow.com/a/39621077/1835470