<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<!--layui的核心css文件-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<!--LayUI的核心js文件-->
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
//注意：选项卡依赖element模块，否则无法进行功能性操作
layui.use('element',function(){
var element = layui.element;
});
</script>
</head>
<body>
<!--
选项卡
默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card
可以对父层容器设置属性：lay-allowClose="true"来允许Tab选项卡被删除
-->
<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">兰芝 睡眠面膜</div>
<div class="layui-tab-item">多力压榨特香菜籽油</div>
<div class="layui-tab-item">潘婷乳液修护洗发水</div>
<div class="layui-tab-item">美赞臣(MeadJohnson) 儿童奶粉</div>
<div class="layui-tab-item">惠氏(Wyeth) S-26金装幼儿乐</div>
</div>
</div>
<hr>
<!--简洁风格-->
<div class="layui-tab layui-tab-brief">
<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">兰芝 睡眠面膜</div>
<div class="layui-tab-item">多力压榨特香菜籽油</div>
<div class="layui-tab-item">潘婷乳液修护洗发水</div>
<div class="layui-tab-item">美赞臣(MeadJohnson) 儿童奶粉</div>
<div class="layui-tab-item">惠氏(Wyeth) S-26金装幼儿乐</div>
</div>
</div>
<hr>
<!--卡片风格-->
<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">
<div class="layui-tab-item layui-show">兰芝 睡眠面膜</div>
<div class="layui-tab-item">多力压榨特香菜籽油</div>
<div class="layui-tab-item">潘婷乳液修护洗发水</div>
<div class="layui-tab-item">美赞臣(MeadJohnson) 儿童奶粉</div>
<div class="layui-tab-item">惠氏(Wyeth) S-26金装幼儿乐</div>
</div>
</div>
<hr>
<!--带删除-->
<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">
<div class="layui-tab-item layui-show">兰芝 睡眠面膜</div>
<div class="layui-tab-item">多力压榨特香菜籽油</div>
<div class="layui-tab-item">潘婷乳液修护洗发水</div>
<div class="layui-tab-item">美赞臣(MeadJohnson) 儿童奶粉</div>
<div class="layui-tab-item">惠氏(Wyeth) S-26金装幼儿乐</div>
</div>
</div>
</body>
</html>
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved
