8

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?

Chris Simpson
  • 7,821
  • 10
  • 48
  • 68
  • The JS tab control would not work with JS turned of since it's all js – hunter Mar 31 '10 at 17:15
  • 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) – Chris Simpson Mar 31 '10 at 17:16
  • @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. – Chris Simpson Mar 31 '10 at 17:17
  • jQuery 1.3.2 or jQueryUI 1.3.2? – Roman Mar 31 '10 at 17:17
  • looks like I'm on the stable release so I'll probably stick with the coded solution, thanks though – Chris Simpson Mar 31 '10 at 17:23

4 Answers4

9

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);
}
hunter
  • 62,308
  • 19
  • 113
  • 113
  • perfect, I've wrapped this up in a helper function and called it from the load event of the tabs control, thanks – Chris Simpson Mar 31 '10 at 17:31
  • 1
    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. – Zach Shallbetter Aug 19 '11 at 23:19
  • @Zach - where were you last year? – hunter Aug 22 '11 at 02:25
  • That's an odd question, what do you mean? – Zach Shallbetter Aug 22 '11 at 17:13
  • Look at the date from this question/answer. Over 1 year ago. – hunter Aug 22 '11 at 18:01
  • 1
    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. – Zach Shallbetter Aug 22 '11 at 19:46
  • 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. – hunter Aug 22 '11 at 20:22
  • Asked the question here. http://stackoverflow.com/questions/6934875/jquery-post-ui-tabs-not-linking-properly-with-page-anchors – Zach Shallbetter Aug 24 '11 at 16:46
5

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
Roman
  • 19,581
  • 6
  • 68
  • 84
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.

Community
  • 1
  • 1
casperOne
  • 73,706
  • 19
  • 184
  • 253
0

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

Jason
  • 1