layui的tab和form冲突

最新推荐文章于 2023-07-12 18:43:24 发布

banhuan1984

最新推荐文章于 2023-07-12 18:43:24 发布

阅读量563

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kongkongFabian/p/10107244.html

版权

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>

// 切换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