LayUI之动态选项卡

最新推荐文章于 2024-06-24 23:23:11 发布

zsm030616

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量952

点赞数

文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/zsm030616/article/details/125868924

版权

本文详细介绍了LayUI的Tab选项卡功能，包括响应式Tab、带删除功能的Tab、动态创建Tab的步骤，以及如何利用lay-filter进行选项卡切换。此外，还提及了使用LayUI实现登录功能的相关准备工作和注意事项。

摘要由CSDN通过智能技术生成

一，什么是Tab选项卡

Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	  <ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</li>
	  </ul>
	  <div class="layui-tab-content"></div>
	</div>

<div class="layui-tab layui-tab-card">
	  <ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</li>
	  </ul>
	  <div class="layui-tab-content" style="height: 100px;">
	    <div class="layui-tab-item layui-show">1</div>
	    <div class="layui-tab-item">2</div>
	    <div class="layui-tab-item">3</div>
	    <div class="layui-tab-item">4</div>
	    <div class="layui-tab-item">5</div>
	    <div class="layui-tab-item">6</div>
	  </div>
	</div>

二，响应式Tab

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标

三，带删除的tab

与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose=“true”

四，动态tab

1.根据模块名称判断是否已经存在tab选项卡

   $(".layui-tab-title li[lay-id='" + name + "']").length > 0

2.切换到指定选项卡

element.tabChange('tabs', name);

3.动态选项卡

新增一个tab项，在新增tab时定义的是方法，当想用

最低0.47元/天解锁文章