实现点击栏目，对应切换到该栏目并且显示内容，比如下图：
这里我应用了：layUI经典模块化前端框架官网
需要我们下载layui对应的css和js框架，代码中我也加上了对应的注释
直接看代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>卡片风格的Tab</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="C:\Users\Administrator\Desktop\layui-v2.4.5\layui\css\layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body> <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">用户管理内容</div> <div class="layui-tab-item">权限分配内容</div> <div class="layui-tab-item">商品管理内容</div> <div class="layui-tab-item">订单管理内容</div> </div> </div> <script src="C:\Users\Administrator\Desktop\layui-v2.4.5\layui\layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 }); </script> </body> </html>
