Si8 Si8 - 4 months ago 12
Javascript Question

How to show or hide tab based on the page url

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

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


I have the following code which figured out which section of the website the user is in:

$(window).load(function () {
var homeTab = ["Dashboard", "YourTasks", "Dependencies", "View", "Profiles"];
var recruitingTab = ["RCVUpload", "RCVEdit", "RReviewDocument", "RPFUpload", "RPFEdit"];
var adminTab = ["AdminMessages", "AdminUpload", "AdminEdit", "AdminChecklists"];

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

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

function getPageName(url) {
var index = url.lastIndexOf("/") + 1;
var filenameWithExtension = url.substr(index);
var filename = filenameWithExtension.split(".")[0]; // <-- added this line
return filename; // <-- added this line
}


How do I take the original code and add to the document.ready function to achieve the above?

EDIT: I updated the code above to see if it works but it's not working. :/

Si8 Si8
Answer

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 = ["Dashboard", "YourTasks", "Dependencies", "View", "Profiles"];
    var recruitingTab = ["RCVUpload", "RCVEdit", "RReviewDocument", "RPFUpload", "RPFEdit"];
    var adminTab = ["AdminMessages", "AdminUpload", "AdminEdit", "AdminChecklists"];

    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.