JQuery UI tabs: How do I navigate directly to a tab from another page?

Question

JQuery UI tabs are implemented by named anchors in an unordered list. When you hover over one of the tabs you can see this in the link shown at the foot of the browser:

http://mysite/product/3/#orders

Above would be the "orders" tab for example. JQuery obviously intercepts the click to this anchor and opens the tab instead.

However if I bookmark the link above or link to it from elsewhere in the site the page does not open on the specific tab.

In the tab initialisation block I was considering putting in some code that looks for a named anchor in the URL and, if it finds one, does an index lookup of the tabs and calls the select on it. This would mean it will still work with JS switched off.

But is there an easier/nicer/better way?

Demi

The JS tab control would not work with JS turned of since it's all js – Curling

Interesting - 1.3.2. Been meaning to upgrade for a while but I'm going by the "ain't broke don't fix it" policy. Sounds like I've got a good reason to upgrade now (though I'm not looking forward to the retest) – Demi

@Hunter - no the tabs wouldn't work but the behaviour would still be correct. If JS was switched off the link would take you to the correct part of the page. – Demi

jQuery 1.3.2 or jQueryUI 1.3.2? – Larry

looks like I'm on the stable release so I'll probably stick with the coded solution, thanks though – Demi

Answer 1

Found this example here:

if(document.location.hash!='') {
    //get the index from URL hash
    tabSelect = document.location.hash.substr(1,document.location.hash.length);
    $("#my-tabs").tabs('select',tabSelect-1);
}

Curling

perfect, I've wrapped this up in a helper function and called it from the load event of the tabs control, thanks – Demi

One thing this does not do is retain hash information between tabs. So if I got from www.page.com#1 to www.page.com#2 from within the same page it will not change the tab. – Nyberg

@Zach - where were you last year? – Curling

That's an odd question, what do you mean? – Nyberg

Look at the date from this question/answer. Over 1 year ago. – Curling

I was looking for a solution to a specific problem related to this answer. I don't think there's anything wrong with belated comments and questions considering everyone still receives notifications. – Nyberg

I didn't say anything was wrong with it. You could certainly add functionality to do what you're saying by snagging all anchor tags with a hash tag and manipulating the tabs accordingly. – Curling

Asked the question here. #6935375 – Nyberg

Answer 2

As of version 1.8 jQuery UI supports this functionality. See example here:

1. Second tab active by default
2. Third tab active by default

Larry

thanks, gone with the stable release for the time being but I'll upgrade when I can – Demi

BTW jQueryUI 1.8 is the current stable release (see section What about jQuery UI 1.7?). blog.jqueryui.com/2010/03/jquery-ui-18 – Larry

strange, they haven't updated the front page yet: Latest (1.8: jQuery 1.4+) Stable (1.7.2: jQuery 1.3+) - I'm using jquery 1.3 also so I would be upgrading both at the same time. – Demi

the links are no longer valid – Constrictive

Unfortunately it doesn't work when content is loaded via AJAX. – Riflery

@DamianNowak Not really sure what you mean. – Larry

Answer 3

In versions of jQuery UI prior to 1.8 (not inclusive) that's pretty much the way you would have to do it. The tab extension (AFAIK) doesn't know to switch based on which anchor it is initialized with (when the page loads) so you have to do that bit manually (in the ready event, of course).

As another answer indicates, the new version of the tabs in jQuery UI 1.8 supports bookmarking out of the box.

Tollman

thanks, just wanted to be sure I wasn't missing anything obvious. Must be a common requirement – Demi

FWIW the demo they have on the jQuery UI site seems to initialize properly on anchor. – Larry

@R0MANARMY - I suggest you add an answer saying "this works in the latest version". I could mark you up then – Demi

Answer 4

I use the Session plugin to accomplish this in a custom tab class

Edgy