Tab选项卡案例

最新推荐文章于 2020-10-04 11:47:58 发布

南逗

最新推荐文章于 2020-10-04 11:47:58 发布

阅读量492

点赞数

本文链接：https://blog.csdn.net/weixin_46217523/article/details/105951777

版权

该案例详细分析了Tab选项卡的实现方法，包括两个主要模块，点击选项卡时，选中项背景变为红色，其他保持原状。内容区域会根据选项卡的切换实时更新，通过设置自定义属性并结合排他思想，实现在点击选项卡时，对应序号的内容显示，其余隐藏。

摘要由CSDN通过智能技术生成

案例分析
1.Tab栏切换有2个大的模块
2.上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
3.下面的模块内容，会随着上面的选项卡变化而变化，所以下面的模块变化写到上面的选项卡点击事件里
4.规律：下面的模块显示内容会随着上面的选项卡一一对应，相匹配
5.核心思路：给上面的tab_list里面所有的li添加自定义属性，属性值从0开始编号
6.当我们点击tab_list里面某个li，让tab_list里面对应序号的内容显示，其余隐藏（排他思想）

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.tab{
				margin:100px auto;
				width:800px;
				height: 300px;
				list-style: none;
				
			}
			.tab_list{