网站导航菜单远择一个栏目跳转后,保持栏目为选中状态

最新推荐文章于 2021-04-23 13:03:57 发布

weixin_30817749

最新推荐文章于 2021-04-23 13:03:57 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shell-blog/p/5450221.html

本文介绍了一种使用JavaScript来实现在用户浏览页面时对应导航菜单项高亮显示的方法。通过简单的代码示例展示了如何根据当前页面URL为导航菜单中的相应条目添加样式。

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

html

<div id="navMenu">  
     <ul>  
         <li><a href="/web/home" >首页</a></li>  
         <li><a href="/web/survey" >问卷调查</a></li>  
    </ul>  
</div>

js实现

/**
 * 导航菜单
 */
$(document).ready(function(){  
    $('#navMenu li a').each(function(){  
        if($($(this))[0].href==String(window.location))  
            $(this).parent().addClass('hover');  
    });  
})