直接上代码，效果图在最下面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../layui/css/layui.css"> <title>hl-qianduan</title> </head> <body> <div class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">hl-qianduan</div> <!-- 头部区域（可配合layui已有的水平导航） --> <!--左边头部--> <ul class="layui-nav layui-layout-left lay-filter=" "> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社区</a></li> </ul> <!--右边头部--> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;"> <button data-method="notice" class="layui-btn">公告</button> </div> </li> <li class="layui-nav-item"> <a href="">控制台<span class="layui-badge">0</span></a> </li> <li class="layui-nav-item"> <a href="">个人中心<span class="layui-badge-dot"></span></a> </li> <li class="layui-nav-item"> <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img layui-anim-rotate">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">修改信息</a></dd> <dd><a href="javascript:;">安全管理</a></dd> <dd><a href="javascript:;">退了</a></dd> </dl> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认展开</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">选项1</a></dd> <dd><a href="javascript:;">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <span class="layui-breadcrumb" lay-separator="|"> <a href="">娱乐</a> <a href="">八卦</a> <a href="">体育</a> <a href="">搞笑</a> <a href="">视频</a> <a href="">游戏</a> <a href="">综艺</a> </span> <br> <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> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> © layui.com - 底部固定区域 </div> </div> <script src="../layui/layui.js"></script> <script> //JavaScript代码区域 layui.use([\'element\',\'layer\'], function(){ var element = layui.element, $ = layui.jquery, layer=layui.layer;//Tab的切换功能，切换事件监听等，需要依赖element模块 //触发事件 var active = { tabAdd: function () { //新增一个Tab项 element.tabAdd(\'demo\', { title: \'新选项\' + (Math.random() * 1000 | 0) //用于演示 , content: \'内容\' + (Math.random() * 1000 | 0) , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下 }) } , tabDelete: function (othis) { //删除指定Tab项 element.tabDelete(\'demo\', \'44\'); //删除：“商品管理” othis.addClass(\'layui-btn-disabled\'); } , tabChange: function () { //切换到指定Tab项 element.tabChange(\'demo\', \'22\'); //切换到：用户管理 } , notice: function () { layer.open({ type: 1 , title: false //不显示标题栏 , closeBtn: false , area: \'300px;\' , shade: 0.8 , id: \'LAY_layuipro\' //设定一个id，防止重复弹出 , btn: [\'火速围观\', \'残忍拒绝\'] , btnAlign: \'c\' , moveType: 1 //拖拽模式，0或者1 , content: \'<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>\' , success: function (layero) { var btn = layero.find(\'.layui-layer-btn\'); btn.find(\'.layui-layer-btn0\').attr({ href: \'http://www.layui.com/\' , target: \'_blank\' }); } }); } } $(\'.site-demo-active\').on(\'click\', function(){ var othis = $(this), type = othis.data(\'type\'); active[type] ? active[type].call(this, othis) : \'\'; }); $(\'#layerDemo .layui-btn\').on(\'click\', function(){ var othis = $(this), method = othis.data(\'method\'); active[method] ? active[method].call(this, othis) : \'\'; }); }); </script> </div> </body> </html>