Question

我使用jQuery .load（）在多个页面上加载了“navigation.html”（静态编码导航）文件现在，我需要为每个页面用户点击动态设置活动<li>。出于特定原因，我无法使用正文ID。还有其他方法吗？

Answer 1

如果您可以按类或ID识别当前页面（例如：body＆gt; div＃contacts）for contacts.html并且此类/ 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);

Answer 2

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

这当然只有在您的href与网址

匹配时才有效

Answer 3

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

  <li class="some">

或

  <li title="some">

或

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

和jQuery与window.location对象 $（'li [title =“'+ window.location.path +'”]'）。addClass（“active”）;

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

3 个答案: