layui側邊欄點怎麼跳轉

在layui側邊欄中實現點擊跳轉，需要按照以下步驟進行：定義跳躍路徑，在選單項目的href屬性中指定目標路徑。新增layui監聽事件，監聽選單項目點擊，並跳到指定路徑。可選，使用lay-nav-side側邊欄導覽元件，該元件自動處理導覽選單項目的點擊跳轉。

如何在 layui 側邊欄中實現點擊跳轉？

在layui 框架中，實作側邊欄點擊跳轉的方法如下：

1. 定義跳轉目標路徑

在側邊欄選單的<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 -side 元件時，無需手動監聽點擊事件，layui 會自動處理導覽選單項目的點擊跳轉。

以上是layui側邊欄點怎麼跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！