layui tab选项卡会把所有选项卡的内容都从第一个选项卡就显示出来,怎样隐藏其他的

提问 已结 4 95
找不着北168
悬赏:20飞吻
版本:layui 浏览器:




<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">内部运作人员提成管理</li>
<li>内部翻译人员提成管理</li>
<li>内部审核人员提成管理</li>
<li>客服人员提成管理</li>
<li>采购人员提成管理</li>
</ul>
<div class="layui-tab-content" style="height: 100%;width:800px">
<div class="layui-tab-item layui-show" style="display:none">
<div class="btn-box clearfix">
<div class="btn-box-right">
<button id="add" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-add-1">添加</i>
</button>
</div>
</div>
<div class="table-box">
<table id="runRoyalty"class="table-box table table-hover"></table>
</div>
</div>
<div class="layui-tab-item layui-show "style="display:none">
<div class="btn-box clearfix">
<div class="btn-box-right">
<button id="add" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-add-1">添加</i>
</button>
</div>
</div>
<div class="table-box">
<table id="translateRoyalty" class="table table-hover"></table>
</div>
</div>
<div class="layui-tab-item layui-show" style="display:none">
<div class="btn-box clearfix">
<div class="btn-box-right">
<button id="add" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-add-1">添加</i>
</button>
</div>
</div>
<div class="table-box">
<table id="examineRoyalty" class="table table-hover"></table>
</div>
</div>
<div class="layui-tab-item layui-show" style="display:none">
<div class="btn-box clearfix">
<div class="btn-box-right">
<button id="add" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-add-1">添加</i>
</button>
</div>
</div>
<div class="table-box">
<table id="customerRoyalty" class="table table-hover"></table>
</div>
</div>
<div class="layui-tab-item layui-show" style="display:none">
<div class="btn-box clearfix">
<div class="btn-box-right">
<button id="add" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-add-1">添加</i>
</button>
</div>
</div>
<div class="table-box">
<table id="purchaseRoyalty" class="table table-hover"></table>
</div>
</div>
</div>
</div>



layui.use(['table','element','jquery'], function(){
var table = layui.table;
var element = layui.element;
var $ = layui.$ //重点处

var $ = layui.jquery
,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

//触发事件
var active = {
tabAdd: function(){
//新增一个Tab项
element.tabAdd('demo', {
title: '新选项'+ (Math.random()*1000|0)
,content: '内容'+ (Math.random()*1000|0)
,id: new Date().getTime() //
})
}
,tabDelete: function(othis){
//删除指定Tab项
element.tabDelete('demo', '44');


othis.addClass('layui-btn-disabled');
}
,tabChange: function(){
//切换到指定Tab项
element.tabChange('demo', '22'); //
}
};

$('.site-demo-active').on('click', function(){
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});

//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid);

element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id');
});

});

//加载表格数据

//运作人员提成
function loadData(){
$('#runRoyalty').initDataGrid({
url:'',
method:'get',
queryParams:{
pageNo:1,
pageSize:10
},
pageParams :getParams, // 默认分页为true,为true时该参数必填 ,参数为 function (pageNumber,pageSize)
pageSize:10,
pageList:[5,10,20,30,40,50],
columns:[[
{field:'ck',checkbox:true,width:'5%'},
{field:'id',title:'序号',halign:'center',align:'center',width:'100px',formatter:number},
{field:'month',title:'报告类型',align:'center',width:'350px',halign:'center'},
{field:'salesName',title:'金额',align:'center',width:'350px',halign:'center'},
]],
loadFilter:function(data){
return {
total:data.totalCount,
rows:data.data
};
},
remoteSort:false,
emptyMsg:'没有查询到相关数据',//无效
singleSelect:false,
rownumbers:false
});

$('#translateRoyalty').initDataGrid({
url:'',
method:'get',
queryParams:{
pageNo:1,
pageSize:10
},
pageParams :getParams, // 默认分页为true,为true时该参数必填 ,参数为 function (pageNumber,pageSize)
pageSize:10,
pageList:[5,10,20,30,40,50],
columns:[[
{field:'ck',checkbox:true,width:'5%'},
{field:'id',title:'序号',halign:'center',align:'center',width:'100px',formatter:number},
{field:'month',title:'报告类型',align:'center',width:'350px',halign:'center'},
{field:'salesName',title:'金额',align:'center',width:'350px',halign:'center'},
]],
loadFilter:function(data){
return {
total:data.totalCount,
rows:data.data
};
},
remoteSort:false,
emptyMsg:'没有查询到相关数据',//无效
singleSelect:false,
rownumbers:false
});

$('#examineRoyalty').initDataGrid({
url:'',
method:'get',
queryParams:{
pageNo:1,
pageSize:10
},
pageParams :getParams, // 默认分页为true,为true时该参数必填 ,参数为 function (pageNumber,pageSize)
pageSize:10,
pageList:[5,10,20,30,40,50],
columns:[[
{field:'ck',checkbox:true,width:'5%'},
{field:'id',title:'序号',halign:'center',align:'center',width:'100px',formatter:number},
{field:'month',title:'提成金额',align:'center',width:'350px',halign:'center'},
{field:'salesName',title:'金额固定',align:'center',width:'350px',halign:'center'},
]],
loadFilter:function(data){
return {
total:data.totalCount,
rows:data.data
};
},
remoteSort:false,
emptyMsg:'没有查询到相关数据',//无效
singleSelect:false,
rownumbers:false
});

$('#customerRoyalty').initDataGrid({
url:'',
method:'get',
queryParams:{
pageNo:1,
pageSize:10
},
pageParams :getParams, // 默认分页为true,为true时该参数必填 ,参数为 function (pageNumber,pageSize)
pageSize:10,
pageList:[5,10,20,30,40,50],
columns:[[
{field:'ck',checkbox:true,width:'5%'},
{field:'id',title:'序号',halign:'center',align:'center',width:'100px',formatter:number},
{field:'month',title:'提成金额',align:'center',width:'350px',halign:'center'},
{field:'salesName',title:'金额固定',align:'center',width:'350px',halign:'center'},
]],
loadFilter:function(data){
return {
total:data.totalCount,
rows:data.data
};
},
remoteSort:false,
emptyMsg:'没有查询到相关数据',//无效
singleSelect:false,
rownumbers:false
});

$('#purchaseRoyalty').initDataGrid({
url:'',
method:'get',
queryParams:{
pageNo:1,
pageSize:10
},
pageParams :getParams, // 默认分页为true,为true时该参数必填 ,参数为 function (pageNumber,pageSize)
pageSize:10,
pageList:[5,10,20,30,40,50],
columns:[[
{field:'ck',checkbox:true,width:'5%'},
{field:'id',title:'序号',halign:'center',align:'center',width:'100px',formatter:number},
{field:'month',title:'提成金额',align:'center',width:'350px',halign:'center'},
{field:'salesName',title:'金额固定',align:'center',width:'350px',halign:'center'},
]],
loadFilter:function(data){
return {
total:data.totalCount,
rows:data.data
};
},
remoteSort:false,
emptyMsg:'没有查询到相关数据',//无效
singleSelect:false,
rownumbers:false
});


}
loadData();
回帖