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=" 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');
}
});
});
 
原文地址:https://www.cnblogs.com/kongkongFabian/p/10107244.html