How to jump when clicking on layui sidebar

To implement click jump in the layui sidebar, you need to follow the following steps: define the jump path and specify the target path in the href attribute of the menu item. Add layui listening events, listen for menu item clicks, and jump to the specified path. Optionally, use the lay-nav-side sidebar navigation component, which automatically handles the click jump of navigation menu items.

How to implement click-to-jump in layui sidebar?

In the layui framework, the method to implement click-to-jump on the sidebar is as follows:

1. Define the jump target path

In the <a></a> tag of the sidebar menu, use the href attribute to specify the jump target path:

<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. Add layui listening events

After the page is loaded, listen to the click event of the sidebar menu item through layui's listening event:

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. Use the layui sidebar navigation component

layui also provides a component specifically for sidebar navigation, 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>

is using lay-nav -side component, there is no need to manually listen for click events, layui will automatically handle the click jump of the navigation menu item.

The above is the detailed content of How to jump when clicking on layui sidebar. For more information, please follow other related articles on the PHP Chinese website!