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

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

当我们点击左侧菜单或左侧导航的时候,会变成选中状态

 

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

 

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

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=usergrouphref =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>
    A+
发布日期:2021年01月27日 08:40:54  所属分类:Layui
最后更新时间:2021-01-28 07:11:28
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
Photoshop CS视频教程全集:1000集PS课程
  • ¥ 199.0元
  • 市场价:899.0元
jQuery视频教程: 从零开始学合集
  • ¥ 39.0元
  • 市场价:39.0元
Microsoft 全家桶 “激活码/产品密钥”永久
Microsoft 全家桶 “激活码/产品密钥”永久
  • ¥ 29.99元
  • 市场价:888元
PHP零基础入门到精通视频教程
  • ¥ 199.0元
  • 市场价:199.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0

  1. 头像 彩凤 4

    今天我也遇到这情况了,感谢!