JQuery UI tabs: How do I navigate directly to a ta

问题:

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?

回答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);
}

回答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

回答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.

回答4:

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