首先依旧是源码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图标</title>
<%--引入css样式--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<%--引入js文件--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>默认风格的Tab</legend>
</fieldset>
<%--默认风格--%>
<div class="layui-tab">
<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 class="layui-tab-item layui-show">
1. 高度默认自适应，也可以随意固宽。
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
</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>
</div>
<%--简洁风格的Tab--%>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>简洁风格的Tab</legend>
</fieldset>
<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" style="height: 100px;">
<div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</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>
</div>
<%--卡片风格--%>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>卡片风格的Tab</legend>
</fieldset>
<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">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</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>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>
1.选项卡的样式说明:
默认风格：layui-tab
简约风格：layui-tab-brief
卡片风格:layui-tab-card
你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>带删除功能的Tab</legend> </fieldset> <div class="layui-tab layui-tab-card" lay-allowclose="true"> <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: 150px;"> <div class="layui-tab-item layui-show"> 1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例 2. 删除功能适用于所有风格 </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>
lay-filter="demo"：通过过滤的方法动态往它里面加东西
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>动态操作Tab</legend> </fieldset> <div class="layui-tab" lay-filter="demo" lay-allowclose="true"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="11">网站设置</li> <li lay-id="22">用户管理</li> <li lay-id="33">权限分配</li> <li lay-id="44">商品管理</li> <li lay-id="55">订单管理</li> </ul> <div class="layui-tab-content"> <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> </div> <div class="site-demo-button" style="margin-bottom: 0;"> <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button> <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button> <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button> </div>
常用元素操作 - layui.element
https://www.layui.com/doc/modules/element.html
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use(['element','jquery'], function(){
var element = layui.element;
var $ = layui.jquery;
$("#add").click(function () {
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
/*,id: '55'//选项卡标题的lay-id属性值*/
});
})
$("#delete").click(function () {
element.tabDelete('demo', '55'); //删除 lay-id="xxx" 的这一项
})
$("#change").click(function () {
element.tabChange('demo', '44'); //切换到 lay-id="yyy" 的这一项
})
$("#deleteAll").click(function () {
$("#removeAll").remove()
})
//…
});
</script>
浙公网安备 33010602011771号