Comment sauter en cliquant sur la barre latérale de Layui

Pour implémenter le saut par clic dans la barre latérale layui, vous devez suivre les étapes suivantes : définir le chemin de saut et spécifier le chemin cible dans l'attribut href de l'élément de menu. Ajoutez des événements d'écoute layui, écoutez les clics sur les éléments de menu et accédez au chemin spécifié. Vous pouvez éventuellement utiliser le composant de navigation de la barre latérale latérale lay-nav, qui gère automatiquement le saut par clic des éléments du menu de navigation.

Comment implémenter le clic-saut dans la barre latérale de Layui ?

Dans le framework layui, la méthode pour implémenter le clic pour sauter dans la barre latérale est la suivante :

1 Définissez le chemin cible du saut

Dans le <a>. balise du menu de la barre latérale, utilisez l'attribut href pour spécifier le chemin cible du saut : <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 Ajoutez l'événement d'écoute layui 🎜🎜🎜Une fois la page chargée, surveillez le clic de la barre latérale. élément de menu via l'événement d'écoute de l'événement layui : 🎜rrreee🎜🎜3. Utiliser le composant de navigation de la barre latérale layui 🎜🎜🎜layui fournit également un composant spécifiquement pour la navigation dans la barre latérale, lay-nav-side : 🎜rrreee🎜 Lorsque vous utilisez le composant lay-nav-side, il n'est pas nécessaire d'écouter manuellement les événements de clic. Layui gérera automatiquement le saut de clic de l'élément de menu de navigation. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!