前端：卡片风格的Table

鲲志说

发布于 2025-04-07 13:01:47

3200

实现点击栏目，对应切换到该栏目并且显示内容，比如下图：

这里我应用了：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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent.com 删除

layui