Bootstrap

使用layui左侧菜单点击跳转后变成选中状态

我们在开发后台时候,会选择使用layui,为我们大大提供了方便,当我们点击左侧菜单时候,会变成选中状态
在这里插入图片描述

这是layui系统默认提供给我们的,但是当我们给菜单项里添加了 URL后就没这么顺利了,我们点击后,页面会重新刷新,刷新后选中状态就没有了,当然,可以考虑使用iframe,但是iframe使用起来总是不那么灵活,通过调试台我们可以看到,选中状态其实就是父级标签多了一个class属性
在这里插入图片描述
这样的话,问题就好解决了,上js代码。

    /**
     * 假如当前 Url 是 http// www. liangshunet.
     * com/pub/item.aspx?t=osw7,则截取到的相对路径为:/pub/item.aspx。
     *
     * @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];
        }
        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");
            }
        });
    });

我相信这个代码一点都不难,细心点都可以看懂,使用时记得要引入jQuery相关文件。

;