Bagaimana untuk melompat apabila mengklik bar sisi layui

Untuk melaksanakan lompat klik dalam bar sisi layui, anda perlu mengikuti langkah berikut: tentukan laluan lompat dan tentukan laluan sasaran dalam atribut href item menu. Tambah acara mendengar layui, dengar klik item menu dan lompat ke laluan yang ditentukan. Secara pilihan, gunakan komponen navigasi bar sisi lay-nav-side, yang secara automatik mengendalikan lompatan klik item menu navigasi.

Bagaimana untuk melaksanakan lompat klik di bar sisi layui?

Dalam rangka kerja layui, kaedah untuk melaksanakan klik-untuk-lompat dalam bar sisi adalah seperti berikut:

1 Tentukan laluan sasaran lompatan

Dalam <a>. tag menu bar sisi , gunakan atribut href untuk menentukan laluan sasaran lompat: <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 Tambah acara mendengar layui 🎜🎜🎜Selepas halaman dimuatkan, pantau klik bar sisi. item menu melalui acara mendengar acara layui: 🎜rrreee🎜🎜3 Gunakan komponen navigasi bar sisi layui 🎜🎜🎜layui juga menyediakan komponen khusus untuk navigasi bar sisi, lay-nav-side: 🎜rreee🎜 dalam Apabila menggunakan komponen lay-nav-side, tidak perlu mendengar acara klik secara manual Layui akan mengendalikan lompatan klik item menu navigasi secara automatik. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melompat apabila mengklik bar sisi layui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!