js高亮显示当前导航

最新推荐文章于 2024-08-21 18:03:01 发布

Alice_666

最新推荐文章于 2024-08-21 18:03:01 发布

阅读量2.4k

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Alice_666/article/details/78983747

版权

这篇博客介绍如何利用JavaScript实现网页中导航菜单的高亮显示，通过代码示例详细解析了HTML结构和JS逻辑，帮助读者理解动态改变导航样式的方法。

摘要由CSDN通过智能技术生成

首先写html代码结构

<ul id="navC">
    <li><a href="/"  rel="nofollow" title="首页">首页</a></li>
    <li><a href="/"  rel="nofollow" title="导航一">导航一</a></li>
    <li><a href="/"  rel="nofollow" title="导航二">导航二</a></li>
</ul>

写点击后要高亮的颜色

<style>
.active{color:blue;}
</style>

对导航进行js控制

var navs = document.getElementById("navC").getElementsByTagName("a");
for(var i = 0; i < navs.length;  i++){
	var getLink = navs[i].getAttribute("href");
	var getUrl = document.location.href;
	if(getUrl.indexOf(getLink) != -1 && i !== 0){
		navs[i].className