LayUI之动态选项卡

最新推荐文章于 2024-07-24 23:16:01 发布

無话可说.

最新推荐文章于 2024-07-24 23:16:01 发布

阅读量405

点赞数

分类专栏： eclipse 文章标签： java servlet 数据库

本文链接：https://blog.csdn.net/weixin_65565181/article/details/125863288

版权

本文详细介绍了LayUI中动态选项卡的使用，包括：什么是Tab选项卡，响应式Tab的设计，带有删除功能的Tab，动态创建和切换Tab的方法，以及结合登录功能的实现。内容涵盖LayUI的多种Tab样式和交互特性。

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

哈喽铁子们今天分享LayUI之动态选项卡好了看之前想先看看目录吧

一，什么是Tab选项卡

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

提供两个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>