Lauiuiサイドバーをクリックしたときにジャンプする方法-ライユイのチュートリアル-php.cn

Lauiuiサイドバーをクリックしたときにジャンプする方法

下次还敢

リリース： 2024-04-26 01:39:20

オリジナル

688 人が閲覧しました

layui サイドバーにクリックジャンプを実装するには、次の手順に従う必要があります。ジャンプパスを定義し、メニュー項目の href 属性でターゲットパスを指定します。 lauiui リスニングイベントを追加し、メニュー項目のクリックをリッスンし、指定されたパスにジャンプします。必要に応じて、ナビゲーションメニュー項目のクリックジャンプを自動的に処理する、lay-nav-side サイドバーナビゲーションコンポーネントを使用します。

Lauiuiサイドバーをクリックしたときにジャンプする方法

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 はナビゲーションメニュー項目のクリックジャンプを自動的に処理します。

以上がLauiuiサイドバーをクリックしたときにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。