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

荆轲刺秦王

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

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

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

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

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

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

<ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">课程管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:url('course/index')}">课程列表</a></dd>
                        <dd><a href="{:url('course_room/index')}">微课堂列表</a></dd>
                        <dd><a href="{:url('course_case/index')}">课堂案例列表</a></dd>
                        <dd><a href="{:url('course_member/index')}">报名记录</a></dd>
                        <dd><a href="{:url('course_order/index')}">课堂订单列表</a></dd>
                    </dl>
                </li>
</ul>

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

<a href="/{:request()->module()}/{:request()->controller()}/{:request()->action()}.html" style="display: none" id="local"></a>

然后重点来看一下 js :

<script type="text/javascript" src="__STATIC__/admin/layui/layui.js"></script>
{block name="script"}{/block}
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });
    jQuery(document).ready(function($){
        var local = $('#local').attr('href').toLowerCase();
        console.log(local);
        $('.layui-nav-child a').each(function(){
            var href = $(this).attr('href');
            var hrefs = href.replace('_','');
            //console.log(hrefs);
            if(local == hrefs){
                $(this).parent().addClass('layui-this');
            }
        });



    });
</script>

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

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

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

相关推荐