layui侧边栏菜单怎么在页面加载时根据哈希Hash自动定位

雨枫酱_6805

雨枫酱_6805

2026-10-31

522人浏览

原创

Layui侧边栏菜单加载时不会自动根据URL Hash高亮定位,需手动匹配Hash与菜单数据并添加layui-this和layui-nav-itemed类。

layui侧边栏菜单怎么在页面加载时根据哈希hash自动定位

页面加载时,Layui 侧边栏菜单本身不会自动根据 URL Hash 定位高亮项——它不内置这个逻辑。必须手动匹配当前 Hash(或 pathname)与菜单数据,找到对应节点,并给其父级 `

  • ` 添加 layui-this 类,同时展开所有上级菜单(加 layui-nav-itemed 类)。

    1. 确保菜单数据已加载且结构清晰

    侧边栏菜单需由前端动态渲染(如通过 AJAX 获取后端权限菜单),不能依赖原生 layui.navbar(),因其只支持两级、不支持递归和权限裁剪。推荐后端返回嵌套格式的菜单树,每个节点含:id、title、href(或 url)、children(数组,可为空)等字段。

    • 避免用 pid/id 让前端拼树——易出错,应由后端直接返回完整嵌套结构
    • href 建议统一为绝对路径(如 /user/list),便于与 location.hash 或 location.pathname 对比
    • 若使用 Hash 导航(如 #user/list),需提前截掉 #,再做字符串匹配

    2. 解析 Hash 并查找匹配菜单项

    在 DOM 就绪后(如 $(document).ready() 或 layui.use 回调内),解析 location.hash,提取目标路径:

    • 例如 URL 是 http://a.com/#/user/list,用 location.hash.slice(1) 得到 /user/list
    • 遍历菜单数据树,用 node.href === targetPath 或模糊匹配(如 targetPath.startsWith(node.href))定位节点
    • 注意:若菜单项 href 是 user/list 而 Hash 是 /user/list,需统一前缀(都加 / 或都去掉)

    3. 手动添加 layui-this 和 layui-nav-itemed 类

    找到匹配节点后,从该节点向上回溯所有父级(包括自身),逐层为其 DOM 元素添加对应 class:

    深蓝色网站后台管理系统layui框架模板-AdminPro
    深蓝色网站后台管理系统layui框架模板-AdminPro

    一款深蓝色网站后台管理系统layui框架模板

    下载
    • 当前项的
    • 加 layui-this
    • 所有父级
    • (含二级、一级)加 layui-nav-itemed
    • 若菜单含
      ,确保其父
      已有 layui-nav-itemed,否则子菜单不展开
    • 可用 jQuery 链式操作快速定位并设类,例如:$(`[data-id="${node.id}"]`).addClass('layui-this').parents('li').addClass('layui-nav-itemed')

    4. 配合 Tab 模块保持同步(可选)

    如果系统同时使用了 Layui Tab(如 layuimini),还需触发 Tab 切换以保证视图一致:

    • 在定位完侧边栏后,调用 element.tabChange('filterName', layId),其中 layId 应与菜单项的 lay-id 或自定义 data 属性一致
    • 确保 Tab 的 lay-filter 与 JS 中调用的 filter 名称完全相同
    • 此步非必须,但能避免“菜单高亮了,Tab 还停在首页”的体验断层

    不复杂但容易忽略:Hash 定位不是靠框架自动完成的,核心是“数据驱动 DOM 状态”。只要菜单数据可查、路径可比、class 可控,就能稳稳实现加载即定位。

  • 相关专题

    更多
    ajax教程
    ajax教程

    php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    2023.06.14

    3160

    4

    ajax中文乱码解决方法
    ajax中文乱码解决方法

    ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.31

    360

    5

    ajax传递中文乱码怎么办
    ajax传递中文乱码怎么办

    ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    2023.11.15

    2973

    5

    ajax网站有哪些
    ajax网站有哪些

    使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    2024.09.24

    1161

    6

    Vite 项目如何打包和部署
    Vite 项目如何打包和部署

    Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

    2026.10.28

    60

    16

    Vite 如何搭配 Vue.js
    Vite 如何搭配 Vue.js

    Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

    2026.10.28

    40

    15

    Vite 项目目录怎么看
    Vite 项目目录怎么看

    Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

    2026.10.28

    140

    10

    Gradle插件开发入门教程
    Gradle插件开发入门教程

    本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

    2026.10.22

    140

    11

    Gradle Wrapper配置教程
    Gradle Wrapper配置教程

    本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

    2026.10.22

    120

    10

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    ThinkPHP配置开发与CMS后台实战
    ThinkPHP配置开发与CMS后台实战

    共87课时 | 13.1万人学习

    第二十三期_综合实战
    第二十三期_综合实战

    共89课时 | 11.4万人学习

    Layui 快速入门精讲
    Layui 快速入门精讲

    共5课时 | 1.6万人学习