Layui“导航/菜单”点击URL跳转后变成选中状态方法

我们在开发后台时候，国内一般都会选择使用Layui，因为它可以为我们大大的提供方便，当我们点击左侧菜单或左侧导航的时候，会变成选中状态。

这是Layui系统默认提供给我们的，但是，当我们给菜单项里添加了 URL（a标签href属性）后就没这么顺利了。这是因为我们点击后，页面会重新刷新，刷新后选中状态就没有了，当然，可以考虑使用iframe，但是，iframe使用起来总是不那么灵活。

通过调试台我们可以看到，选中状态其实就是父级标签多了一个class属性：class = "layui-this"

一、jQuery代码

这样的话，问题就好解决了，上jQuery代码。

<script type="text/javascript">
    /**
     * 假如当前 Url 是 http// www.fujieace.com/pub/item.php?t=osw7，则截取到的相对路径为：/pub/item.php?t=osw7。
     *
     * @returns
     */
    function GetUrlRelativePath() {
        var url = document.location.toString();
        var arrUrl = url.split("//");

        var start = arrUrl[1].indexOf("/");
        var relUrl = arrUrl[1].substring(start);// stop省略，截取从start开始到结尾的所有字符

        if (relUrl.indexOf("?") != -1) {
            relUrl = relUrl.split("?")[0]; //匹配文件，例如:fujieace.php
            //relUrl = relUrl.split("?")[1]; //匹配参数,例如：?type=fujieace
        }
        return relUrl;
    }

    /**
     * 选中菜单默认打开
     * @returns
     */
    $(document).ready(function() {
        var url = GetUrlRelativePath();
        var patt1 = new RegExp(url);
        //$(".layui-this").removeClass();
        $(document.body).find('a').each(function(i, obj) {
            var str = $(obj).attr('href');
            if (patt1.test(str)) {
                $(obj).parent().addClass("layui-this");
            }
        });
    });
</script>

我相信这个代码一点都不难，细心点的人都可以看懂，使用时记得要引入jquery.min.js相关文件。

注意：

经过本人的测试，上面的代码至少不适合我吧！这是因为：

1、我的文件是相同的，入口文件只有一个admin.php

2、虽然说我的参数是不相同的，但是，由于我的每个a标签都有href属性，而且有的href属性还是非常接近的，例如：href = admin.php?type=usergroup 与 href =admin.php?type=usergrouppurview。像这种，我用参数去正则匹配，就会同时匹配到两个a标签，就会有两个class属性：class = "layui-this" 同时成选中状态。

因此，我用原生javascript代码写了一个，请继续向下看：

二、JavaScript 代码

大家可以按照以下代码再去优化一下，升级一下。我为了赶时间，先实现功能吧！毕竟上面催得比较紧，暂时先不管了，后期有空再说。

<script>
    var a = document.getElementsByTagName('a');
    var url = document.URL;

    for(var i=0;i<=a.length;i++){
        //console.log(i);
        if(document.getElementsByTagName("a")[i].href === url){
            document.getElementsByTagName("a")[i].classList.add("layui-this");
       }
    }
</script>

总结：上面不管哪种代码？其实原理上都是差不多的，只要适合自己的需求就行了。

三、JavaScript 代码升级（Layui“导航/菜单”点击URL跳转后变成选中状态并展开子菜单）

由于项目要求：Layui“导航/菜单”点击URL跳转后变成选中状态并展开子菜单；

相信大家都知道，Layui后台布局，默认的效果是：一个是默认展开子菜单，一个是默认不展示子菜单，也就是关闭子菜单。

现在公司要求，原来那个默认展开子菜单的功能不用管，主要是不展示子菜单那里，只要我点击了不展示子菜单下面的a标签链接，它就会自动展开子菜单。

在Layui框架中，有一个特定的页面元素来设置默认展开子菜单：layui-nav-itemed，说得简单点，也就是增加一个 class = "layui-nav-itemed" 属性。

因此，最终实现代码如下：

<script>
    //导航 菜单点击选中 JavaScript代码区域
     var a = document.getElementsByTagName('a');
     var url = document.URL;

    for(var i=0;i<=a.length;i++){
        //console.log(i);
        if(document.getElementsByTagName("a")[i].href === url){
            document.getElementsByTagName("a")[i].classList.add("layui-this");
            document.getElementsByTagName('a')[i].parentElement.parentElement.parentElement.classList.add("layui-nav-itemed");
            //console.log(document.getElementsByTagName('a')[i].parentElement.parentElement.parentElement);
        }
    }

</script>