如何根据页面url显示或隐藏选项卡

How to show or hide tab based on the page url

本文关键字：隐藏 选项 显示 url 何根      更新时间：2023-09-26

这是我的代码来翻转标签和标签下的内容:

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

我有下面的代码，计算出用户在网站的哪个部分:

$(window).load(function () {
    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");
    }
    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');
    }
});

如何将原始代码添加到文档中。准备好实现上述功能吗?

编辑:我更新了上面的代码，看看它是否有效，但它不工作。:/

使用位置散列要容易得多:

http://__someurl__#menustate

然后您可以将路径与菜单状态解耦，这样您就不再需要跟踪哪个路径转换到哪个菜单状态。

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

你可以使用任何你想要的url:

www.mysite.com/somepage#recruiting

你可以在加载时检查哈希值，你也可以改变它，并使其在单个页面中可书签

您可以尝试为addClass()和removeClass()使用多个选择器，如

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

我是这样解决的:

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

请告诉我是否有更有效的方法来做这件事。

相关文章：