Question

I have jQuery ui tabs and I would like to be able to open a tab from a link (inside or outside the current tab or page)

It does work if the link is in an external page and looks like this:

http://server.com/view.php?id=130#section-2

This correctly open the tab “section-2”

The problem is when the link is in the same page, it does not refresh the page (as it just add the #section-2) so the tab is not selected.

I saw some answers example using ids in the tag and binding the click in jQuery, but I cannot use this because some of my links are computed and I don’t know if they are pointing to inside or outside.

Answer 1

Add the id “section-2-link” to the tags linked to the tabs (add the ‘-link’ at the end to avoid having same id as the tab content). And then add this to js

jQuery(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "section-2")
    jQuery('#' + hash + '-link').trigger("click");
});

This detects when the hash on url changes and trigger the click on the link you need (to open the correct tab)