Question

I wonder, how jQuery UI tabs is working – it is switching the tab depends on the ID (#123) from the URL address.

I want to do something similar, but I dont know how its working.

If you dont know what ID I mean, here is an example URL: http://example.com/my_code.php#tab-3

And if there is an div with an ID attribute: <div id="tab-3">...</div> then jQuery UI is switching to that tab.

How can I do something similar?

Answer 1

On initialization, the jQuery UI tabs widget uses window.location.hash to obtain the fragment part of the page’s URL, then iterates over the tabs and activates the one that matches the fragment.

The relevant part of the source code (lines 159 to 166 in the current trunk) is:

if (location.hash) {
        this.anchors.each(function(i, a) {
                if (a.hash == location.hash) {
                        o.selected = i;
                        return false; // break
                }
        });
}