layui侧边栏点击怎么跳转

百变鹏仔 1个月前 (11-15) #layui

文章标签侧边

在layui侧边栏中实现点击跳转，需要按照以下步骤进行：定义跳转路径，在菜单项的href属性中指定目标路径。添加layui监听事件，监听菜单项点击，并跳转指定路径。可选，使用lay-nav-side侧边栏导航组件，该组件自动处理导航菜单项的点击跳转。

如何在 layui 侧边栏中实现点击跳转？

在 layui 框架中，实现侧边栏点击跳转的方法如下：

1. 定义跳转目标路径

在侧边栏菜单的标签中，使用 href 属性指定跳转目标路径：

<ul class="layui-nav layui-nav-tree">  <li class="layui-nav-item">    <a href="index.html">      <i class="layui-icon layui-icon-home"></i>      <span>首页</span>    </a>  </li>  <li class="layui-nav-item">    <a href="about.html">      <i class="layui-icon layui-icon-user"></i>      <span>关于</span>    </a>  </li></ul>

2. 添加 layui 监听事件

在页面加载后，通过 layui 的监听事件，监听侧边栏菜单项的点击事件：

layui.use('element', function() {  var element = layui.element;  // 监听侧边栏菜单项点击事件  element.on('nav(lay-system-side-menu)', function(data) {    var url = data.elem.getAttribute('href');    // 执行页面跳转    window.location.href = url;  });});

3. 使用 layui 侧边栏导航组件

layui 还提供了一个专门用于侧边栏导航的组件，lay-nav-side：

<div class="layui-side layui-bg-black">  <div class="layui-side-scroll">    <ul class="layui-nav lay-bg-black layui-nav-tree" lay-filter="lay-system-side-menu">      <li class="layui-nav-item">        <a href="index.html">          <i class="layui-icon layui-icon-home"></i>          <span>首页</span>        </a>      </li>      <li class="layui-nav-item">        <a href="about.html">          <i class="layui-icon layui-icon-user"></i>          <span>关于</span>        </a>      </li>    </ul>  </div></div>

在使用 lay-nav-side 组件时，无需手动监听点击事件，layui 会自动处理导航菜单项的点击跳转。

文章推荐

layui侧边栏点击怎么跳转

layui的分页怎么用

layui怎么设置checkbox勾选

layui怎么对弹出层显示数据

layui表格怎么清空

layui有什么主要功能