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~
浙公网安备 33010602011771号