Ask a Jedi: Using links to select tabs in jQuery UI Tabs

This post is more than 2 years old.

Frances asked:

Ray, thank you so much for this article: http://www.insideria.com/2009/03/playing-with-jquery-tabs.html. I had spent many hours over several days trying to find a way to link directly to a specific tab from an external URL. I found lots of references to doing this when loading the tabs with Ajax, but it appeared that there was no way to do it when not using Ajax, which was simply mind-boggling. You just solved it for me. Add me to the list of people who think this should be included in the jquery.ui API.

Now, just one more thing: How can I do the same thing from a text link within the same page? I naming the tab anchors and then referencing them with a hashmark (e.g., a href="#4"), but that puts the tabs smack at the top of the browser window, cutting off the content above the tabs (which makes since, since named anchors are supposed to put the target link at the top of the window).

So how do I make a text link that will activate a specific tab within the same page without having to use a full URL that would reload the page?

This is rather simple once you take a look at the Methods docs for jQuery Tabs. One of the methods you can call is select, which will pick one of the tabs. Here is a very simple example showing this.

<html>

<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="Stylesheet" /> <script type="text/javascript"> $(document).ready(function() { $('#tabs').tabs() }) </script> </head>

<body>

<div id="tabs"> <ul> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> </ul>

<div id="tab-1"> <p>Tab 1</p> </div> <div id="tab-2"> Tab 2 </div> <div id="tab-3"> Tab 3 </div>

</div>

<p> Sample text with inline links to tags. So you can click <a href="" onclick="$('#tabs').tabs('select',1);return false;">here</a> for tab 2 and <a href="" onclick="$('#tabs').tabs('select',2);return false;">here</a> for tab 3. </p>

</body> </html>

Moving from top to bottom, I begin by simply loading up the relevant JavaScript and CSS files for my jQuery UI tabs.

Next I set up my tabs. This is done with $('#tabs').tabs(). jQuery finds the tabs block in my HTML, uses its mojo, and transforms it into beautiful tabs. So far so good. Now look at the last paragraph, specifically the two links. Here is one of them:

<a href="" onclick="$('#tabs').tabs('select',1);return false;">

What the link does is simply make use of the API to call the select method. Tabs are 0 based so this will select the second tab. Nice and simple. Click the big ole Demo button below to see it in action.

As a side note - I try to avoid onclicks now and use jQuery event handlers instead. However - and I'm certainly willing to be admit I'm wrong here - it just felt cleaner to have it directly on the link instead.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Simon posted on 6/11/2010 at 9:20 PM

Hi all, just a quick question, cflayout and it's various functions or jquery ? I've been using cflayout for a while but have started using jquery and wondered if cflayout was a dying breed in the community now.

Comment 2 by Phillip Senn posted on 6/11/2010 at 10:57 PM

There is a plugin called jQueryUI Layout here:
http://groups.google.com/gr...

I feel that if you can accomplish some of what you need with jQuery UI, then use it as much as possible - not to mix cflayout in with it.
You should see my redesigned home page. It now used jQuery UI.

Comment 3 by Raymond Camden posted on 6/11/2010 at 11:02 PM

I'll ditto PSenn. Don't mix em. In general I prefer jQuery because I'm more powerful in it then the widgets that ship w/ CF.

Comment 4 by johans posted on 6/11/2010 at 11:24 PM

I have not tried this but expect in your link click handler you could use a jQuery selector to select the tab and chain it with the jQuery click():

$('#tab-1').click()

Comment 5 by Raymond Camden posted on 6/11/2010 at 11:28 PM

Interesting - if you try it johans and it works - let us know.

Comment 6 by Andy Sandefer posted on 6/16/2010 at 6:34 PM

I'm a big user of the jQuery tabs and accordions and I ran into a similar issue trying to get this type of functionality to work last week only I also had accordions set within the tabs. In order to make those two play nice together you need to initialize the tabs after you ready the accordions like so...

$("#accordion5").accordion();
$("#accordion5").accordion("option", "animated", 'slide');
$("#accordion5").accordion("option", "clearStyle", true);
$("#accordion5").accordion("option", "autoHeight", false);
$("#accordion5").accordion("option", "fillSpace", true);

$("#tabsMain").tabs();

Also - here's the same thing in function form in case you roll like that and are dynamically generating your links based on database content...
selectTab = function(userSelectedIndex){
$("#tabsMain").tabs("select", userSelectedIndex);
}