thinkcmf+layui 改为滑动响应,单击跳转

  最近网站开发,想将layui tab 单击响应改为滑动响应,搜索很多,终于解决问题,在此记录下。

  首先给需要悬浮触发的layui-tab组件加上layui-tab--hover 类

<div class="layui-tab layui-tab--hover" lay-filter="demo" style="margin-top: 20px;">
  <ul class="layui-tab-title">
    <li class="layui-this"> 网站设置</li>
    <li><a href="xxx.html"> 用户管理</a></li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>资源管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

然后将下面的代码放置页面中执行

$(function () {
  $('.layui-tab--hover .layui-tab-title li').mouseenter(function () {
    $(this).addClass('layui-this').siblings().removeClass('layui-this')
    const tabRoot = $(this).closest('.layui-tab--hover')
    const tabContent = tabRoot.find('.layui-tab-content')
    const index = $(this).index()
    tabContent.find('.layui-tab-item').eq(index).addClass('layui-show').siblings().removeClass('layui-show')
  })
})
posted on 2024-06-25 13:13  星空守望者--jkmiao  阅读(15)  评论(0编辑  收藏  举报