在静态导航上动态设置活动链接

Setting active link dynamically on static navigation

本文关键字：设置 活动 链接 动态 静态 导航      更新时间：2023-09-26

我使用jQuery.load（）在多个页面上加载了"navigation.html"（静态编码的navigtaion）文件现在我需要为每个页面用户点击动态设置活动的<li>。由于特定原因，我不能使用body id。还有其他方法吗？

如果您可以通过contacts.html的class或id（例如：body>div#contacts）来识别当前页面，并且这个class/id是唯一的，那么您必须将其与您的导航进行匹配，另一种方法是将window.location.href值（如果您愿意，可以解析）与导航进行匹配。

changeActiveLink是在JS（ex:init.JS）文件中定义的，您可以将其包含在每个页面中

function changeActiveLink() {
  var currentLocation = window.location.href;
  currentLocation = currentLocation.replace('//', '/').split('/');
  var page = currentLocation[currentLocation.length - 1];
  if (page == "") { page = 'index.html'; }
  $('#leftNav1 a[href*="'+ page +'"]').addClass('active');
}

当包含"init.js"时，会从每个文件调用此行。

$('#leftNav1').load('navigation.html', changeActiveLink);

或者您可以使用任何HTML甚至HTML5标记来指定li项。

  <li class="some">

或

  <li title="some">

或

  <li attr-specify="some-specific-in-url">

和带有window.location对象的jQuery$（'li[title="'+window.location.path+'"]'）.addClass（"活动"）；

您可以设置一些jquery脚本来获取url，然后找到与之匹配的li的href。这将允许您将Class（）添加到活动的li中。

当然，只有当您的href与url 匹配时，这才有效

相关文章：