前端：卡片风格的Table

最新推荐文章于 2024-08-20 23:20:28 发布

鲲志说

最新推荐文章于 2024-08-20 23:20:28 发布

阅读量3.4k

点赞数

分类专栏：前端文章标签：前端：卡片风格的Table

本文链接：https://blog.csdn.net/m0_37482190/article/details/90525759

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

实现点击栏目，对应切换到该栏目并且显示内容，比如下图：
在这里插入图片描述
这里我应用了：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>