layui 无内置 card 组件，需用 layui-card 类配合 css 实现；点击切换边框高亮需事件代理监听、动态切换 active 类、css 中用 !important 保证优先级，并支持动态加载与 localstorage 状态保持。
Layui 本身没有内置的 card 组件，所谓“卡片”通常是开发者用 layui-card 类名或自定义结构（如 <div class="layui-card">）配合 CSS 实现的视觉区块。要实现点击时切换边框高亮颜色，核心是：**用事件代理监听点击、动态切换自定义类、CSS 中用 <code>!important 保证样式优先级**。
1. 定义卡片结构和初始样式
确保每个卡片有统一标识，比如 class="layui-card"，并设置基础边框：
示例 HTML：<div class="layui-card" data-id="1"> <div class="layui-card-header">用户信息</div> <div class="layui-card-body">...</div> </div>
CSS 中定义默认边框和高亮边框（必须加 !important，避免被 layui 内联样式或后续规则覆盖）：
.layui-card {
border: 1px solid #e6e6e6 !important;
transition: border-color .2s;
}
.layui-card.active {
border-color: #009688 !important; /* 主色 */
}
.layui-card.active-blue {
border-color: #2196f3 !important; /* 蓝色 */
}
.layui-card.active-red {
border-color: #ff5722 !important; /* 红色 */
}
2. 用事件代理绑定点击并切换颜色
不要给每个卡片单独绑定 click，而应委托到父容器（如 .layui-card-group 或 body），防止动态加载后失效：
- 监听
body下所有.layui-card的点击 - 点击时先清除其他卡片的 active 类（可选多个颜色类）
- 再为当前卡片添加目标颜色类，例如循环切换：
active → active-blue → active-red → active
JavaScript 示例：
let currentColorIndex = 0;
const colors = ['', 'active-blue', 'active-red', 'active'];
<p>layui.$('body').on('click', '.layui-card', function() {
const $this = layui.$(this);</p><p>// 清除所有卡片的 color 类（保留基础 layui-card）
layui.$('.layui-card').removeClass('active active-blue active-red');</p><p>// 切换下一个颜色类
currentColorIndex = (currentColorIndex + 1) % colors.length;
const colorClass = colors[currentColorIndex];
if (colorClass) $this.addClass(colorClass);
});</p>
3. 兼容重载与动态插入
如果卡片是通过 AJAX 加载或表格重绘后插入的，上述事件代理已天然支持——因为监听的是 body，新卡片无需重新绑定。
若需在页面初始化后恢复上次选中状态（如刷新后记住哪个卡片被点过），可把 data-id 和对应颜色存入 localStorage，并在 DOM 就绪后读取并手动添加类。
4. 补充交互体验
- 加
cursor: pointer让鼠标悬停时有点击提示 - 移动端需加
-webkit-tap-highlight-color: transparent消除点击灰斑 - 如需键盘支持（Tab + Enter），可给卡片加
tabindex="0"，并监听keydown事件响应 Enter 键
