layui中左侧nav菜单导航点击选中显示

问题：nav菜单栏点击选中显示

layui镜像地址：https://www.layui.site/layer/index.htm

这是layui系统默认提供给我们的，但是当我们给菜单项里添加了 href路径（写死的路径）后就没这么顺利了，我们点击后，页面会重新刷新，刷新后选中状态就没有了.。

问题解决方案如下：

加入下面这行js就可以了，亲测有效。(其实下面这行代码意思很简单就是给a标签加了一个class="layui-this"让它选中而已。)

// 获取路径
    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;
    }

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

完整代码如下：

<div style="height: 800px; width: 200px; background: #1E9FFF;border: 1px solid #1E9FFF;">
    <ul class="layui-nav layui-nav-tree layui-bg-blue" lay-shrink="all" lay-filter="test"
        style="height: 100%;">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">预审案件</a>
            <dl class="layui-nav-child">
                <dd><a
                        href="${rootCtx}/auth/patent/getPage">预约案件<span
                        class="layui-badge" id="appointment"></span></a></dd>
                <dd><a href="${rootCtx}/auth/patent/getCheckPage">审查信息<span
                        class="layui-badge" id="examination"></span></a></dd>
            </dl>
        </li>
    </ul>
</div>
<script>
    // 获取路径
    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;
    }

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

效果如下图所示：

以上就是问题的解决方法，也可以参考以下博客看问题解决方案：
https://blog.csdn.net/qq_40929047/article/details/102516299?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_ecpm_v1~rank_v31_ecpm-2-102516299.pc_agg_new_rank&utm_term=layui+%E8%8F%9C%E5%8D%95%E9%80%89%E4%B8%AD&spm=1000.2123.3001.4430
如有侵权，请联系本人删除