如何根据页面网址显示或隐藏标签 [英] How to show or hide tab based on the page url

问题描述

$ b

  $（function（）{$（$））这是我的代码，用于翻转选项卡和选项卡下的内容： b $ b $（'＃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） （$ .inArray（pathName，adminTab）！= -1）{
 alert（at recruiting tab）; 
} 
 at admin tab）; 
 $（#tab li＃tHome）。removeClass（'current'）; 
 $（＃tab li＃tRecruiting）。removeClass（'current'） ; 
 $（＃tab li＃tAdminControls）。addClass（'current'）; 
} 
}）; 
  

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

编辑：我更新了上面的代码以查看它是否可以使用，但它不起作用。 ：/ b>

解决方案

我解决了这个问题：

  $（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）; //默认为HOME标签，它的内容总是显示
} 
 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'）; 
} 
}）; 
  

请让我知道是否有更有效的方法来做到这一点。

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 = ["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');
    }
});

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. :/

解决方案

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.

这篇关于如何根据页面网址显示或隐藏标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！