So springen Sie, wenn Sie auf die Laui-Seitenleiste klicken

Um Click Jump in der Laui-Sidebar zu implementieren, müssen Sie die folgenden Schritte ausführen: Definieren Sie den Sprungpfad und geben Sie den Zielpfad im href-Attribut des Menüelements an. Fügen Sie Laui-Abhörereignisse hinzu, warten Sie auf Menüelementklicks und springen Sie zum angegebenen Pfad. Optional können Sie die Navigationskomponente „lay-nav-side sidebar“ verwenden, die automatisch den Klicksprung von Navigationsmenüelementen verarbeitet.

Wie implementiert man Click Jump in der Laui-Seitenleiste?

Im Laui-Framework ist die Methode zum Implementieren von Click-to-Jump in der Seitenleiste wie folgt:

1. Definieren Sie den Sprungzielpfad

Im <a> Tag des Seitenleistenmenüs, verwenden Sie das Attribut href, um den Sprungzielpfad anzugeben: <a> 标签中，使用 href 属性指定跳转目标路径：

<code class="html"><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></code>

2. 添加 layui 监听事件

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

<code class="javascript">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;
  });
});</code>

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

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

<code class="html"><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></code>

在使用 lay-nav-siderrreee

🎜2 Fügen Sie das Laui-Hörereignis hinzu 🎜🎜🎜Überwachen Sie nach dem Laden der Seite den Klick auf die Seitenleiste Menüpunkt über das Hörereignis von Laui-Ereignis: 🎜rrreee🎜🎜3. Verwenden Sie die Laui-Seitenleisten-Navigationskomponente 🎜🎜🎜layui bietet auch eine Komponente speziell für die Seitenleistennavigation, lay-nav-side: 🎜rrreee🎜 Bei Verwendung der lay-nav-side-Komponente ist es nicht erforderlich, manuell auf Klickereignisse zu warten. Layui verarbeitet den Klicksprung des Navigationsmenüelements automatisch. 🎜

Das obige ist der detaillierte Inhalt vonSo springen Sie, wenn Sie auf die Laui-Seitenleiste klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!