JS+JQ+Layui菜单栏点击URL跳转后保持选中状态

在使用JS、JQuery和Laeyui构建的菜单栏中，可以通过监听菜单项的点击事件，并使用Laeyui的API来设置当前菜单项为选中状态。以下是一个简单的示例代码：

HTML部分：

<div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
      <li class="layui-nav-item"><a href="javascript:;" data-url="home.html">主页</a></li>
      <li class="layui-nav-item"><a href="javascript:;" data-url="profile.html">个人资料</a></li>
      <li class="layui-nav-item"><a href="javascript:;" data-url="settings.html">设置</a></li>
    </ul>
  </div>
</div>

JavaScript部分（使用JQuery和Laeyui）：

$(document).ready(function(){
  // 监听导航点击事件
  $('.layui-nav').on('click', 'a', function(){
    // 获取点击的菜单项的URL
    var url = $(this).attr('data-url');
    
    // 执行页面跳转（可以使用Ajax请求新内容并更新页面部分内容）
    location.href = url; // 或者使用其他页面跳转方式
    
    // 使用Laeyui API 设置选中状态
    element = layui.element;
    element.nav('test', $(this).attr('data-url'));
  });
});

在这个示例中，当菜单项被点击时，我们获取了data-url属性，这个属性通常包含了要跳转的页面的URL。然后，我们使用标准的页面跳转location.href到指定的URL。最后，我们使用Laeyui的element.nav方法来设置菜单项为选中状态，其中'test'是lay-filter属性设置的值，它用于识别不同的菜单项。

确保在使用这段代码之前，Laeyui的JS库和CSS库已经被正确加载。