How to show or hide tab based on the page url

Question

This is my code to flip around the tab and the contents under the tab:

$(function () {
    $(\'#tabs li a\').click(function (e) {
        e.preventDefault();
            


        

Answer 1

It's much easier to use a location hash:

http://__someurl__#menustate

You can then de-couple the path from the menu state, so you no longer need to keep track of which path translates to which menu state.

var menustate = document.location.hash;
$('.' + menustate).addClass('active');

Then you can use whatever url you want:

www.mysite.com/somepage#recruiting

You can then check the hash value on load and you can also change it, and make it bookmarkable within a single page.

Answer 2

You can try to use multiple selectors for addClass() and removeClass() like,

$(function () {
    $('#tabs li a').click(function (e) {
        e.preventDefault();
        $('#tabs li, #content .current').removeClass('current');
        $(this).parent().addClass('current');
        var currentTab = $(this).attr('href');
        $(currentTab).addClass('current');
    });

    var homeTab = ["home1", "home2", "home3", "home4", "home5"];
    var recruitingTab = ["rec1", "rec2", "rec3", "rec4", "rec5"];
    var adminTab = ["adm1", "adm2", "adm3", "adm4"];

    var pathName = getPageName(window.location.pathname);
    //remove all current class from each tab
    $("#tHome,#tRecruiting,#tAdminControls,#home,#recruit,#admin").removeClass('current');
    if ($.inArray(pathName, homeTab) != -1) {
        //alert("at home tab");
        $("#tHome,#home").addClass('current'); // show home only
    }
    if ($.inArray(pathName, recruitingTab) != -1) {
        //alert("at recruiting tab");          
        $("#tRecruiting,#recruit").addClass('current'); // show recruiting tab only          
    }
    if ($.inArray(pathName, adminTab) != -1) {
        //alert("at admin tab");           
        $("#tAdminControls,#admin").addClass('current'); // show admin tab only
    }
});

Answer 3

I solved it as follow:

$(function () {
    $('#tabs li a').click(function (e) {
        e.preventDefault();
        $('#tabs li, #content .current').removeClass('current');
        $(this).parent().addClass('current');
        var currentTab = $(this).attr('href');
        $(currentTab).addClass('current');
    });

    var homeTab = ["home1", "home2", "home3", "home4", "home5"];
    var recruitingTab = ["rec1", "rec2", "rec3", "rec4", "rec5"];
    var adminTab = ["adm1", "adm2", "adm3", "adm4"];

    var pathName = getPageName(window.location.pathname);
    //alert(pathName);

    if ($.inArray(pathName, homeTab) != -1) {
        //alert("at home tab"); //by default HOME tab and it's content is always shown
    }
    if ($.inArray(pathName, recruitingTab) != -1) {
        //alert("at recruiting tab");
        $("#tHome").removeClass('current'); //tab
        $("#tRecruiting").addClass('current');
        $("#tAdminControls").removeClass('current');

        $("#home").removeClass('current'); //content
        $("#recruit").addClass('current');
        $("#admin").removeClass('current');
    }
    if ($.inArray(pathName, adminTab) != -1) {
        //alert("at admin tab");
        $("#tHome").removeClass('current'); //tab
        $("#tRecruiting").removeClass('current');
        $("#tAdminControls").addClass('current');

        $("#home").removeClass('current'); //content
        $("#recruit").removeClass('current');
        $("#admin").addClass('current');
    }
});

Please let me know if there is a more efficient way of doing this.