Layui 사이드바 클릭 시 점프하는 방법

layui 사이드바에서 클릭 점프를 구현하려면 다음 단계를 따라야 합니다. 점프 경로를 정의하고 메뉴 항목의 href 속성에 대상 경로를 지정합니다. layui 수신 이벤트를 추가하고, 메뉴 항목 클릭을 수신하고, 지정된 경로로 이동합니다. 선택적으로 탐색 메뉴 항목의 클릭 점프를 자동으로 처리하는 탐색 측면 사이드바 탐색 구성 요소를 사용합니다.

layui 사이드바에서 클릭 점프를 구현하는 방법은 무엇인가요?

layui 프레임워크에서 사이드바에 클릭하여 점프를 구현하는 방법은 다음과 같습니다.

1. 점프 대상 경로를 정의합니다.

<a>에서 사이드바 메뉴의 태그에서 href 속성을 ​​사용하여 점프 대상 경로를 지정합니다: <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.layui 청취 이벤트를 추가합니다. 🎜🎜🎜페이지가 로드된 후 사이드바 클릭을 모니터링합니다. layui의 청취 이벤트를 통한 메뉴 항목 이벤트: 🎜rrreee🎜🎜3.layui 사이드바 탐색 구성요소 사용 🎜🎜🎜layui는 사이드바 탐색을 위한 구성요소인 lay-nav-side도 제공합니다: 🎜rrreee🎜 lay-nav-side 구성 요소를 사용하면 클릭 이벤트를 수동으로 수신할 필요가 없습니다. Layui는 탐색 메뉴 항목의 클릭 점프를 자동으로 처리합니다. 🎜

위 내용은 Layui 사이드바 클릭 시 점프하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!