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');
}
});
});
 

 

转载于:https://www.cnblogs.com/kongkongFabian/p/10107244.html

### Layui Tab 面板的使用与配置 #### 默认 Tabs 切换风格 在 Layui 中,默认 Tabs 的切换通过简单的 HTML 结构加上 JavaScript 初始化来实现。HTML 代码定义了 tab 标题对应的内容区域,JavaScript 负责初始化 tabs 组件并处理用户的交互事件。 ```html <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">标签一</li> <li>标签二</li> <li>标签三</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容一</div> <div class="layui-tab-item">内容二</div> <div class="layui-tab-item">内容三</div> </div> </div> ``` 为了使上述结构生效,需调用 `element` 模块中的 `.init()` 方法[^1]: ```javascript layui.use('element', function(){ var element = layui.element; // 加载后自动执行 .init() 来渲染页面上的所有元素实例 }); ``` #### 简洁 Tabs 切换风格 对于希望减少视觉复杂度的应用场景,可以选择简洁版 Tabs。这主要依赖于 CSS 类的不同组合以及可能自定义的一些样式调整。具体来说,在原有基础上移除不必要的装饰效果即可达到简化外观的目的。 #### 卡片 Tabs 切换风格 卡片形式的 Tabs 更加直观地展示了各个选项卡之间的关系,并且通常会带有边框或其他设计细节以增强用户体验感。要启用这种模式,只需给最外层容器添加特定类名如 `layui-tab-card`: ```html <div class="layui-tab layui-tab-card"> <!-- 同上 --> </div> ``` 以上三种方式均支持动态加载新标签页、关闭单个或全部标签等功能扩展,这些功能可以通过监听相应事件并通过编程手段控制 DOM 变化来完成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值