javascript - 在静态导航上动态设置事件链接

Question

我使用 jQuery .load() 在多个页面上加载了“navigation.html”(静态编码 navigtaion )文件现在我需要动态设置事件 <li>对于用户点击的每个页面。由于特定原因，我无法使用 body id。还有其他方法可以做到这一点吗？

Answer 1

如果您可以通过 contact.html 的类或 id(例如:body > div#contacts)来识别当前页面，并且该类/id 是唯一的，那么您必须将其与导航相匹配，其他方法是匹配 window.location.href 值(如果需要的话可以解析)针对您的导航。

changeActiveLink 在 JS(例如: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);