zoukankan      html  css  js  c++  java
  • 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');
    }
    });
    });
     
  • 相关阅读:
    序列化与反序列化
    进程与线程
    winform基础
    MD5加密
    Docker安装Nextcloud+collabora office+ocdownloader
    Docker安装MariaDB
    Docker 安装 Nginx
    Docker命令大全
    Docker之镜像操作
    Linux入门-Docker安装
  • 原文地址:https://www.cnblogs.com/kongkongFabian/p/10107244.html
Copyright © 2011-2022 走看看