前端：卡片风格的Table
实现点击栏目，对应切换到该栏目并且显示内容，比如下图：
这里我应用了：layUI经典模块化前端框架官网
需要我们下载layui对应的css和js框架，代码中我也加上了对应的注释
直接看代码：
代码语言：javascript代码运行次数：0运行复制<!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>