javascript - URLに基​​づいてアクティブなタブを設定する

Question

非表示の div を切り替え、クリックすると適切なタブにアクティブな状態を設定するシンプルなタブ付きインターフェイスがあります。

誰かがタブの URL にアクセスすると、そのタブのコンテンツのみが表示されますが、これは問題ありません。

私がする必要があるのは、その URL に直接アクセスした場合に、そのタブのアクティブ状態を設定することです。

abc.com/index.html#gallery、abc.com/index.html#recipes などの URL があります。

abc.com/index.html#recipes にアクセスすると、[レシピ] タブが強調表示されます。

私のコードは以下のとおりです。アドバイスをよろしくお願いします。

    $(function () {
var app = {
        vars: {
            gallery: $('#gallery'),
            tabContent: $('.tabs .tabContent'),
            nav: $('.tabs nav a')
        },
        events: function () {
            //tabs
            app.vars.nav.on('click', function (e) {
                var thisHash = $(this).attr('href');
                app.setHash(thisHash);
                e.preventDefault();
                $('nav a').removeClass('active');
                $(this).addClass('active');
            });

            //hashchange
            $(window).on('hashchange', function() {
                app.checkHash();
            });

        },
        checkHash: function () {
            var hash = app.getHash();

            if (hash == '') {
                app.vars.tabContent.hide();
                app.vars.gallery.show();
            } else {
                app.goTo(hash);
            }

        },
        getHash: function () {
            return window.location.hash;
        },
        setHash: function (id) {
            window.location.hash = id;
        },
        goTo: function (id) {
            app.vars.tabContent.hide();
            $(id).fadeIn();
        }
    }
app.events();
app.checkHash();


});