jQuery实现高亮显示的方法

本文为你了如何使用jQuery实现页面元素的高亮显示功能，特别是通过addClass和removeClass方法来进行样式控制。对于热爱前端开发的朋友们来说，这无疑是一个值得参考的实用技巧。

这段代码的核心在于利用当前页面的路径（window.location.pathname）与页面中各个链接（a标签）的href属性进行比较。通过这种方式，找到当前活跃（即用户正在浏览）的页面链接，并对其进行高亮显示。换句话说，当用户访问某个页面时，该页面的链接会被自动高亮显示。

主要功能代码如下：

```javascript

var currentPath = window.location.pathname; // 获取当前页面的路径

$(".hd ul li a").each(function (index) { // 遍历页面中的链接元素

var linkHref = $(this).attr("href"); // 获取当前链接的href属性

if (currentPath === linkHref) { // 如果当前路径与链接的href匹配

$(".hd ul li").eq(index).addClass("on"); // 添加高亮样式类

} else {

$(".hd ul li").eq(index).removeClass("on"); // 移除其他链接的高亮样式类

}

});

```

如何使用这段代码呢？非常简单。你只需在CSS中定义".on"类的样式，比如背景颜色、字体颜色等，这段jQuery代码就会自动为你实现页面链接的高亮显示。

例如，你可以在CSS中定义：

```css

.on {

background-color: yellow; / 高亮时的背景颜色 /

font-weight: bold; / 高亮时的字体加粗 /

}

```

这样一来，当某个链接被点击并处于活跃状态时，它的背景颜色会变为黄色，字体也会加粗显示，从而吸引用户的注意力。这对于构建用户体验友好的网站来说是非常有用的。

本文所述的jQuery程序设计理念简洁明了，实用性高。希望这篇文章能够帮助你在前端开发的道路上更进一步。若你有任何疑问或建议，欢迎留言交流。别忘了关注我的其他文章，以获取更多前端开发的实用技巧。让我们一起学习，共同进步！