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') }) })
每天一小步,人生一大步!Good luck~