jQuery实现导航菜单高亮显示的两种方法

实现原理概述

导航菜单高亮的核心逻辑在于样式的动态管理。当用户选中某个元素（如触发点击或页面加载时），需要为当前元素添加激活类名（如 active 或 current），同时移除其同级兄弟元素上的该类名，从而在视觉上突出当前所在层级。

方法一：基于点击事件的菜单高亮

此方法适用于单页应用或仅需在首页展示主导航的场景，能够响应用户的实时点击操作。

第1步：定义HTML结构与样式

首先需要构建基础的导航结构，通常使用无序列表 <ul> 包裹列表项 <li> 和链接 <a>。同时，在CSS中定义常态样式和激活状态样式（例如 .act）。

第2步：编写jQuery脚本逻辑

利用 jQuery 的DOM就绪函数，首先初始化默认选中的菜单项（通常为第一个）。然后遍历所有菜单项，为其绑定点击事件。在点击事件中，调用 .addClass() 为当前被点击的元素添加高亮类，并使用 .siblings().removeClass() 清除同级别其他元素的该类，确保同一时间只有一个菜单项处于高亮状态。

<style>
ul { list-style-type: none; border: 1px solid blue; background: #4f5b93; height: 45px; }
ul li { float: left; height: 45px; line-height: 45px; width: 100px; text-align: center; }
ul li a:link, a:visited { color: #fff; text-decoration: none; }
.act { background: #ff6600; } /* 高亮样式 */
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
    // 默认选中第一个元素
    $('ul li').eq(0).addClass("act");
    
    // 遍历所有菜单项并绑定点击事件
    $('ul li').each(function(){
        $(this).click(function(){
            $(this).addClass("act").siblings().removeClass("act");
        });
    });
});
</script>

方法二：基于URL匹配的自动高亮（含子页适配）

当网站包含多个内页（如新闻详情、产品列表）时，简单的点击事件无法让访问者在进入子页时看到正确的导航高亮。此时需要根据当前页面的URL地址，反向匹配对应的导航菜单。

第1步：完善HTML标记以支持匹配

为了区分不同层级的菜单链接，需要在 <a> 标签中添加自定义属性（如 rel），其值设为该栏目所属的主链接路径或特定标识符。这有助于在多层嵌套结构中快速定位上级导航。

<div id="menu" class="main-nav">
    <dl>
        <dt><a href="/index.html" class="current">首页</a></dt>
    </dl>
    <dl>
        <dt><a href="/news/" rel="/news/">新闻中心</a></dt>
        <dd>
            <a href="/news/detail.html" rel="/news/">文章详情页</a>
        </dd>
    </dl>
</div>

第2步：编写地址栏匹配算法

获取当前浏览器的完整URL字符串后，遍历导航容器内的所有链接。将当前URL与每个链接的 rel 属性（即父级路径）进行比对。如果匹配成功，则给该链接加上激活类 'cur'。 此外，需设置一个标记变量处理“无匹配”情况。若循环结束后未找到任何匹配项（例如访问了非栏目列表下的纯内容页且未做标记），则默认将第一个导航项（通常是首页）设为高亮，防止导航完全失去焦点。

<script type="text/javascript">
var urlstr = location.href;      // 获取当前浏览器URL
var urlstatus = false;           // 标记是否已找到匹配项

// 遍历导航内的所有链接
$("#menu a").each(function () {
    // 判断当前URL是否包含链接的rel属性值，且rel不为空
    // 注意：使用 '/'.indexOf() 确保匹配的是目录级关系而非文件名混淆
    if ((urlstr + '/').indexOf($(this).attr('rel')) > -1 && $(this).attr('rel')!='') {
        $(this).addClass('cur'); // 添加高亮样式
        urlstatus = true;
    } else {
        $(this).removeClass('cur'); // 移除其他项的高亮
    }
});

// 兜底逻辑：如果没有匹配到任何子页面关联，默认高亮第一项
if (!urlstatus) {
    $("#menu a").eq(0).addClass('cur');
}
</script>

总结

方法一简单直观，适合纯静态交互或SPA框架内的路由守卫逻辑；方法二通过URL特征反向推导页面位置，完美解决了多页应用中导航状态跟随的问题。实际开发中，可根据项目复杂度选择单独使用或结合使用这两种技术栈。以上就是基于jQuery实现导航菜单高亮显示的详细内容，更多关于前端交互技巧的资料请关注本站其它相关文章！