jQuery Tabs - Don't Load Tab via # (tab content id)

Question

I am running jQuery v2.1.1-beta1 & jquery-ui-1.10.4 with the following JS in my script file:

$(document).ready(function(){
    $('.festival-list').tabs({
        beforeActivate: function( event, ui ) {
            ui.newTab.index();
        }
    });
};

I would like to solve the 2 issues:

---

Problem 1:

I have a series of tabs which work fine. I have a tab with an li with an id of Press (#press). If I load the url (http://website-url.com/news/#press). The content (tab block) shows properly.

However when this url is used as an href in a footer a link the page loads but fails to load the tab (#press) correctly. At present I have to click the footer link then the relevant tab to load the block, there is no automation.

---

Problem 2:

Secondly I would like to hash to the url, hopefully this will help UI during navigation.

Answer 1

The hash in the url only works on the initial load because the $.ready function is only run once (on page load). If you want to make sure the tabs & URL match each other after the page load, you could do something like

    $(window).on('hashchange', function processHashChange(e) {
        ...
    });

If you're looking for more of a site-wide solution, especially if you want the UI to do complex behaviors based on the URL hash (e.g. more than hide/show a tab in one part of a page), you might want to look into a proper JavaScript routing library like Crossroads.