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.