javascript - Setting active tab based on url -

i have simple tabbed interface switches between hidden div , sets active state on appropriate tab when clicked.

when visits url of tab, shows contents of tab only, fine.

what need set active state of tab if visited url directly.

i've got url's such abc.com/index.html#gallery, abc.com/index.html#recipes etc.

so if visit abc.com/index.html#recipes - recipes tab highlighted.

my code below, in advance advice!

    $(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();   }); 

you need amend goto function set active class on relevant tab. try this:

goto: function (id) {     app.vars.tabcontent.hide();     $(id).fadein();     $('nav a[href="' + id + '"]').addclass('active').siblings().removeclass('active'); }