Question

使用javascript，有哪些选项可以设置当前选择的导航项？

假设每当有人点击导航链接时页面都会刷新，唯一的方法是在服务器端执行此操作，还是通过查找当前URL动态设置页面？

还有其他技巧吗？

Answer 1

window.location.pathname属性是可靠的，如果您使用子菜单与菜单中链接的href进行比较，则会很快（即没有正则表达式测试）。

var menuLinks = document.getElementById('menu').getElementsByTagName('a');

for (var i = 0; i < menuLinks.length; i++) {
  if (menuLinks[i].href.indexOf(window.location.pathname) > -1) {
    doSomething();
  }
}

Answer 2

我在我的网页的<body>元素上设置了一个类属性，例如'home-section'或'products-section'。

加载页面时，您可以使用JavaScript检索属性的值并适当设置导航类。

if ($("body").attr("class") == 'home-section') {
    $("li#primary-nav-home").addClass("active");
}

你也可以使用适当的选择器直接用CSS完成同样的事情，并且不再需要类。

body.home-section li#primary-nav-home { /* styling rules */ }

使用javascript，有哪些选项可以设置当前选择的导航项？

2 个答案: