本文介绍如何实现前端Tab选项卡点击切换效果。通过分析思路，分为选项卡模块和内容模块，利用排他思想，点击选项卡时改变类名并更新对应内容的显示。核心在于为每个选项卡添加自定义属性，并在点击事件中根据属性值匹配显示内容。
思路分析：
Tab栏切换可以分为2个大的模块
1.上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
2.下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
3.规律:下面的模块显示内容和上面的选项卡相对应。
4.核心思路∶给上面的option-list里面的所有li添加自定义属性，属性值从0开始编号。
5.当我们点击option-list里面的某个li,让card-list里面对应索引的内容显示，其余隐藏（排他思想)
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font: 16px "微软雅黑
最低0.47元/天 解锁文章
扫一扫
3439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
