您的位置:首页 > 教程笔记 > 建站教程

layui引入 tab选项卡切换多页面tab切换

2020-10-20 20:25:32 建站教程 118
这里主要介绍如何在页面中引入tab切换
/**
*css部分代码
*/
<link rel="stylesheet" type="text/css" href="js/mon/UILab/layui2.4.5/css/layui.css" />

/**
*html
*/
<div class="layui-tab" lay-filter="all">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</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>

/**
*js
*/
<script type="text/javascript" src="js/mon/UILab/layui2.4.5/layui.js"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery;
var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
element.on('tab(prev)', function(data){});
element.on('tab(all)', function(data){
if(data.index == 0){
console.log("内容1");
} else if(data.index == 1){
console.log("内容2");
}
});
});
</script>

js用这个比较简洁
<script>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>



相关推荐