TP5 使用 layui 做后台左侧菜单栏变为选中状态

荆轲刺秦王

对于很多项目，尤其是小程序的后台，我们都可以使用 layui 作为整个框架的后台模版

当然了，本文主要介绍的还是 layui 的免费版的小功能。

先大概说一下需求，就是在使用 layui 作为后台的时候，左侧的菜单栏结构类似于这样：

在选中了某个模块的时候，当前选中的模块名要加上选中的样式，其实这个样式也是 layui 提供好的，就是 layui-this

本文主要解决的问题是，利用 js 添加样式：

先看一下模版文件的 html 部分：

                

                    课程管理
                    

                        
课程列表
                        
微课堂列表
                        
课堂案例列表
                        
报名记录
                        
课堂订单列表
                    
                

很正常，很普通的 html 这个只需要将自己项目的改一下就可以了

然后重点来看一下 js :

{block name="script"}{/block}

简单说一下这个思路，首先在 html 中写一个隐藏的 a 标签，这个标签的地址为 当前模块/当前控制器/当前方法名

然后再利用 js 进行比较，如果相同 就加上 layui-this 的样式，当然了，这其中需要注意的是：地址栏里的地址，要去除一下类似于 _ （下划线）这种特殊符号，因为在 TP5 中如果控制器使用驼峰命名法的时候，会导致地址栏里的地址有下划线，然后再转一下字母大小写。最后再进行比较。