Question

我在一个网站上工作，该网站的顶部菜单链接应该处于活动状态，而子菜单链接应与文章的类别相匹配，例如Upplev ochbesök> boende> huspålandet。因此，以下内容应显示在活跃状态Upplev ochbesök和Boende。我已经做到了，但是我使用了为每个类别设置固定地址的变量。

例如当用户在产品页面上时，否则检查地址是否为（window.location.href.indexOf（archiveNewsAddress）> -1）设置背景色，然后在第一个顶部菜单链接上悬停，然后在$（“ nav div div a：eq（0）“）。 addClass（“ black-text-white-bg”）;在较低的链接上。当转到下一篇文章类别（例如Evenemang）时，应激活Upplev ochbesök和$（“。nav div div a：eq（1）”）。 addClass（“ black-text-white-bg”）。

我想知道是否有任何方法可以避免使用固定地址变量并找到另一种解决方案？希望你理解我在寻找什么：）

已经使用开关盒进行了一些测试，但是觉得我仍然必须在代码中放入固定地址。我宁愿避免。

下面是今天的jQuery代码。

/* 2019 Vetlanda kommun */
$(document).ready(function() {
/*-------------------Address variables--------------------------*/
/*Address for the first page*/
var aktAdress = " ";
aktAdress = "https://vetlanda.se/2.1d2a7c7616342fe18ec4a777.html";
/*Address for searchresult*/
var ovrigtAdress = "";
ovrigtAdress = "https://vetlanda.se/ovrigt/";
/*Address for contact page*/
var kontaktAdress = "";
kontaktAdress = "https://vetlanda.se /kontaktaoss.4.a225ea0163f45910d2705f.html";

/*Article archive start*/
var arkivBoende = "";
arkivBoende = "https://vetlanda.se/artikelarkiv/boende/";
var arkivEvenemang = "";
arkivBoende = "https://vetlanda.se/artikelarkiv/evenemang/";
var arkivMatOchDryck = "";
arkivMatOchDryck = "https://vetlanda.se/artikelarkiv/matochdryck/";
var arkivShopping = "";
arkivShopping = "https://vetlanda.se/artikelarkiv/shopping/";
var arkivUpplev = "";
arkivUpplev = "https://vetlanda.se/artikelarkiv/upplev/";
/*Article archive end*/

/*Executeing code for active, matching submenu and hover function for menu links*/
/*Hover, toggle and focus out function for first and contact page*/
if ((location.href == aktAdress) || (window.location.href.indexOf(kontaktAdress) > -1)) {
 startkontaktFunktioner();
  } else if (location.href != aktAdress);
/*Show submenu that matches the topmenu link*/
$(".nav div [href]").each(function() {
if (this.href == window.location.href) {
  $(this).parent().css({
    "background": "#d2d2d2",
    "color": "black"
  });
  $(this).parent().addClass("active hover");
  $("div.sub div.child:last-child").focusout(function() {
    $(".nav div").removeClass("hover");
  });
  /*Togglebutton function for Lv 2 submenu and to hide aktiv submenu*/
  $(".nav div").on("click", "button", function() {
    $(".nav div.hover").toggleClass("hover");
    $(this).closest(".nav div").toggleClass("hover");
  });
  mouseOverOut();
}
/*Hover and active function on the menu for archive boende*/
else if ((window.location.href.indexOf(arkivBoende) > -1)) {
  $(".nav div div a:eq(0)").addClass("svart-text-vit-bg");
  artikelFunktioner();
}
/*Hover and active function on the menu for evenemang*/
else if ((window.location.href.indexOf(arkivEvenemang) > -1)) {
  $(".nav div div a:eq(1)").addClass("svart-text-vit-bg");
  artikelFunktioner();
}
 /*Hover and active function on the menu for mat och dryck*/
else if ((window.location.href.indexOf(arkivMatOchDryck) > -1)) {
  $(".nav div div a:eq(2)").addClass("svart-text-vit-bg");
  artikelFunktioner();
}
/*Hover and active function on the menu for arkiv shopping*/
else if ((window.location.href.indexOf(arkivShopping) > -1)) {
  $(".nav div div a:eq(4)").addClass("svart-text-vit-bg");
  artikelFunktioner();
}
/*Hover and active function on the menu for arkiv upplev*/
else if ((window.location.href.indexOf(arkivUpplev) > -1)) {
  $(".nav div div a:eq(5)").addClass("svart-text-vit-bg");
  artikelFunktioner();
}
/*Shows matching submenu for Lv 3 and active link*/
else($(".nav div div [href]").each(function() {
  if (this.href == window.location.href) {
    $(this).parents().eq(3).addClass("active hover").css("background", "#d2d2d2");
$(this).addClass("svart-text-vit-bg");
    $(this).hover(function() {
      return false;
    });
    mouseOverOut();
  }
}));
});
 /*----------------------Functions---------------------------------*/
/*Hover function for all the links*/
function linkHover() {
 $(".nav div").hover(function() {
 $(this).addClass("hover");
}, function() {
 $(this).removeClass("hover");
});
}
/*Togglebutton function for showing the submenu*/
 function toggleButton() {
 $("button").click(function() {
 $(this).closest(".nav div").toggleClass("hover");
});
}
 /*Focusout function for hiding the submenu after you tab out on the last link in the submenu*/
function focusOut() {
$("div.sub div.child:last-child").focusout(function() {
 $(".nav div").removeClass("hover");
});
}
/*Mouseover function to hide the active submenu and Mouseout function to show the active submenu ater the user has his/her mousepointer over another toplink and then takes the mousepointer away from there*/
function mouseOverOut() {
/*Mouseover function to hide active submenu*/
 $(".nav div").mouseover(function() {
 $(".nav div.hover").toggleClass("hover");
  $(this).closest(".nav div").addClass("hover");
  });
 /Mouseout function to show the active submenu ater the user has his/her mousepointer over another toplink and then takes the mousepointer away from there*/
 $(".nav div").mouseout(function() {
  $(this).closest(".nav div").toggleClass("hover");
  $(".nav div.active").addClass("hover");
 });
}
/*Function to mark the first topmenu link and add active hover class to it*/
  function artikelTopActive() {
   $(".nav div:first").addClass("active hover").css("background", "#d2d2d2");
   }
   /*Function to execute the following functions
   artikelTopActive();mouseOverOut();toggleButton();focusOut();*/
   function artikelFunktioner() {
   artikelTopActive();mouseOverOut();toggleButton();focusOut();
  }
 /*Function to execute the following functions
 linkHover();toggleButton();focusOut();*/
 function startkontaktFunktioner() {
  linkHover();toggleButton();focusOut();
  }
   });

如何避免在jQuery中使用固定地址变量？

0 个答案: