公共header,导航栏对应导航高亮

最新推荐文章于 2024-09-04 16:31:50 发布

cxy_12345

最新推荐文章于 2024-09-04 16:31:50 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/cxy_12345/article/details/98957173

导航专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页菜单项高亮显示的方法。通过遍历菜单列表，比较当前页面URL与菜单链接，为匹配的菜单项添加样式类，以实现选中状态的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<div class="jlLayout">
					<ul class="jlMenuList">
						
						<li ><a href="localhost:8080/menu3">菜单3</a></li>
						<li><a href="localhost:8080/menu2">菜单2</a></li>
						<li><a href="localhost:8080/menu1">菜单1</a></li>
						
					</ul>
				</div>

js:

   $(function(){ 
            $(".jlMenuList li a").each(function(){  
                
                $this = $(this);  
                if($this[0].href==String(window.location)){  
                    $this.parent("li").addClass("cur");  

                }  

            });
        });