JqueryUI 1.11 tabs link directly to tab while on the same page

Question

None of the solutions present on Stack Overflow works for 1.11, I have tested each and every one of them.

I need to be able to link from a menu to a tab on the same page using the tab id and not its position on the page.

I can already do that from an external page as you can see here: http://agileprojects.ro/tabs/links.html. I also have a solution for linking inside the page but ONLY to the position of the tab (first, second, etc.). Sadly this is not a valid option as:

the links are the site menu which are created dynamically and they should have the same behavior all-around (aka: I cannot add an on-click event just for some of the links depending on which page I am on, or rather, I can write some JavaScript to this effect, but adding new links and new tabs would be impossible once I turn the site over).

It would make it impossible for the tabs to be switched around by the end user and the links to work correctly.

Code (though it's accessible in the pages linked)

    <script>
  $(function() {
    $('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
  });
            jQuery(document).ready(function($){
    $('#link-1').click(function(){
        $('#tabs').tabs( 'option', 'active', 0 ); // Selects the first tab
    });$('#link-2').click(function(){
        $('#tabs').tabs( 'option', 'active', 1 ); // Selects the first tab
    });$('#link-3').click(function(){
        $('#tabs').tabs( 'option', 'active', 2 ); // Selects the first tab
    });
});
  </script>

The html

<h2>These SHOULD link to tab ID </h2>
<p>They are the same as on the <a href="/tabs/links.html">links.html</a> page, same code, etc. THey don't work :(</p>
<a href="#tabs-1">Tab 1</a><br />
<a href="http://agileprojects.ro/tabs/tabs.html#tabs-2">Tab 2</a><br />
<a href="#tabs-3">Tab 3</a><br />
<br /><br /><br />

<h2>These link to tab position </h2>
<p>aka, they activate tab 1, tab 2, tab 3, etc. </p>
<a href="#tabs-1" id="link-1">Tab 1</a><br />
<a href="#tabs-2" id="link-2">Tab 2</a><br />
<a href="#tabs-3" id="link-3">Tab 3</a><br />

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
<div id="tabs-1">dwedwedwedwedwed</div>
<div id="tabs-2">dwedwedwedwedwed</div>
<div id="tabs-3">dwedwedwedwedwed</div>
</div>

Answer 1

Unfortunately the tabs widget doesn't do this automatically. You have to listen for hashchange events, and manually set the active tab. Here's an approach that might work for you:

$('#tabs').tabs({
    create: function() {
        var widget = $(this).data('ui-tabs');
        $(window).on('hashchange', function() {
            widget.option('active', widget._getIndex(location.hash));
        });
    }
});

The above code will provide a handler for the create event. Then, we get the actually widget instance using data(). Next, we setup a handler for the hashchange event. This is triggered whenever one of our external links is clicked. This handler will set the active tab based on the current location.hash value.

We're using _getIndex(), an internal tabs method to figure out the index of the active tab, based on the hash value. Despite being an internal method, it's a good shortcut in this context.

Here's an example.