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

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

$(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函数来实现上述function？

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

Answer 1

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

 http://__someurl__#menustate 

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

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

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

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

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