Question

这是我的代码，用于翻转选项卡和选项卡下的内容：

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

如何获取原始代码并添加到document.ready函数以实现上述目的？

编辑：我更新了上面的代码，看看它是否有效，但它无法正常工作。：/

Answer 1

使用位置哈希要容易得多：

http://__someurl__#menustate

然后，您可以从菜单状态中解除路径，因此您不再需要跟踪哪个路径转换为哪个菜单状态。

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

然后你可以使用你想要的任何网址：

www.mysite.com/somepage#recruiting

然后，您可以检查加载时的哈希值，也可以更改它，并在单个页面中将其设为可收藏。

Answer 2

您可以尝试为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
    }
});

Answer 3

我解决了它如下：

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

如果有更有效的方法，请告诉我。

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

3 个答案: