layui javascript 导航菜单设置为href跳转后保持选中状态

问题：

通过layui的导航栏可以完成如下的布局：

<ul class="layui-nav layui-nav-tree" lay-filter="test">
    <li class="layui-nav-item">
        <a class="" href="javascript:;">A</a>
        <dl class="layui-nav-child">
            <dd><a href="../">1</a></dd>
            <dd><a href="../clean_table_manage">2</a></dd>
            <dd><a href="../index_table_manage">3</a></dd>
            <dd><a href="../black_manage">4</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">B</a>
        <dl class="layui-nav-child">
            <dd><a href="../etl">1</a></dd>
        </dl>
        <dl class="layui-nav-child">
            <dd><a href="../etl_compute_manage">2</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">C</a>
        <dl class="layui-nav-child">
            <dd><a href="../index_manage">1</a></dd>
        </dl>
        <dl class="layui-nav-child">
            <dd><a href="../index_compute_list_manage">2</a></dd>
        </dl>
        <dl class="layui-nav-child">
            <dd><a href="../index_compute_manage">3</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">D</a>
        <dl class="layui-nav-child">
            <dd><a href="../model_manage">1</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">E</a>
        <dl class="layui-nav-child">
            <dd><a href="../deploy">1</a></dd>
            <dd><a href="../service">2</a></dd>
        </dl>
    </li>
</ul>

但是存在一个问题，子菜单是通过<a>标签的href跳转的，所以每次点击子菜单的选项，由于会跳转到新页面，所以所有的菜单栏都会恢复关闭状态：

这样很不符合用户习惯。

解决

只需加入一段javascript：

    window.onload=function(){
        url = window.location.pathname;
        console.log(url);
        $("a[href='.." + url + "']").parent().addClass('layui-this');
        $("a[href='.." + url + "']").parent().parent().parent().addClass('layui-nav-itemed');
    }

通过获取当前页面的url，获取layui对应子菜单的标签，自动添加layui-this和layui-nav-itemed的类就可以保存当前点击菜单的选中状态了。