layui的tab和form冲突
tab和form一起使用时候,会出现tab框切换不了。通过js来操控其做出切换动作
<div class="layui-tab" lay-filter="dev_tab"> <ul class="layui-tab-title"> <li class="layui-this">基本信息</li> <li>业务信息</li> <li>板卡信息</li> </ul> <div class="layui-tab-content"> <div class="layui-form"> <div class="layui-tab-item layui-show"> <div class="layui-row"> <div class="layui-col-sm2" style="line-height: 36px;text-align: center">设备名称</div> <div class="layui-col-sm4"> <input class="layui-input" style="width: 215px" id="dev_name" type="text" placeholder="请输入设备名称..."> </div> <div class="layui-col-sm2" style="line-height: 36px;text-align: center">设备类型</div> <div class="layui-col-sm4"> <select class="dev_type" id="dev_type" lay-search> </select> </div> </div> </div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> </div> </div>
</div>
js
// 切换tab框
element.on('tab(dev_tab)', function(data){
$(".layui-tab-item").each(function (item) {
$(this).removeClass('layui-show');
if(item === data.index){
$(this).addClass('layui-show');
}
});
});