如何根据当前页面url设置class="selected"

在Web开发中，我们经常需要高亮显示某个菜单项或页面导航链接以示其当前所在位置。一种常见的做法是根据当前页面URL设置相应的class属性，使之高亮显示。

1. 使用JavaScript

我们可以使用JavaScript获取当前页面的URL，然后根据URL设置相应链接的class属性。

var currentUrl = window.location.href;
var navLinks = document.querySelectorAll('#navbar a');
for (var i = 0; i < navLinks.length; i++) {
  if (navLinks[i].href === currentUrl) {
    navLinks[i].classList.add('selected');
  }
}

上面的代码中，我们首先获取当前页面的URL，然后遍历页面上所有导航链接。如果某个链接的href与当前URL相同，则给这个链接添加一个名为"selected"的class。

2. 使用jQuery

如果你正在使用jQuery，可以使用它提供的方便的方法来实现相同的功能。

var currentUrl = window.location.href;
$('#navbar a[href="' + currentUrl + '"]').addClass('selected');

上面的代码中，我们首先获取当前页面的URL，然后找到所有href属性与当前URL相同的链接，给它们添加一个名为"selected"的class。

3. 使用CSS

除了使用JavaScript或jQuery以外，还可以使用CSS来实现根据URL高亮显示导航链接的效果。

#navbar a[href^="http://example.com/current/page"] {
  color: red;
}

上面的代码中，我们选择所有href属性以"http://example.com/current/page"开头的导航链接，并将它们的颜色设置为红色。这里的"current/page"应该替换为当前页面的路径。

通过这种方式，我们可以在CSS中直接根据URL设置样式，而不需要使用JavaScript或jQuery。