选项卡切换
选项卡切换是一种常见的网页设计模式，用于在一个页面内显示和切换不同内容区域，而无需加载页面。用户可以通过点击选项卡切换显示不同的内容，而隐藏其他内容。
多选项显示：页面顶部、侧边或其他地方通常有多个选项卡标题，供用户选择。
内容分区切换：每个选项卡对应一个内容区域，点击某个选项卡会显示对应内容，隐藏其他内容。
样式变化：被选中的选项卡会有特殊的样式（如背景颜色、字体加粗等），以区分选中状态和未选中状态。
选项卡切换的组成
标题区域和内容区域
标题区域
通常以按钮或列表形式排列，每个选项卡代表一个内容分区。
内容分区
每个选项卡对应的内容部分，默认只显示当前选中的内容，其他内容隐藏。
选项卡切换工作流程
初始状态：默认显示第一个选项卡及其对应的内容。
用户操作：用户点击选项卡标题，触发切换操作。
响应切换：
- 改变选项卡样式，突出显示当前选中的选项卡。
- 显示对应的内容分区，隐藏其他分区内容。
选项卡的简单实现
实现思路
- 点击任意li：
- 当前点击的按钮加上“current”样式。
- 其他按钮样式清空。
- 对应的内容使用div显示，其他内容隐藏。
- 隐藏的内容区域被赋予一个随机背景颜色。
实现步骤
1、获取想要获得的html元素
querySelectorAll选择所有.btns下的li元素，以及.content下的div元素。
console.log(li_list)输出按钮列表，方便调试。
var li_list = document.querySelectorAll(".btns li")
var div_list = document.querySelectorAll(".content div")
console.log(li_list)2、循环绑定index属性
for(var i = 0;i<li_list.length;i++){// 给每个标题按钮绑定index属性li_list[i].setAttribute("index",i)......
}遍历每个li，设置一个自定义属性index，表示在列表中的索引。
3、绑定点击事件
点击摸个按钮后，将其className设置为“current”，表示选中状态；其他按钮的className清空，即移除样式。
li_list[i].onclick = function(){//样式切换for(var j = 0;j<li_list.length;j++){li_list[j].className=""}this.className = "current"
}
4、内容切换
使用getAttribute方法获取当前点击按钮的index值
遍历所有内容区域，如果索引k和按钮的index一致，显示内容区域；如果不一致，隐藏内容区域。
var num = this.getAttribute("index")
for(var k = 0;k<div_list.length;k++){if(k==num){//元素显示div_list[k].style.display = "block"}else{div_list[k].style.display = "none"}
}5、为隐藏的内容生成随机背景（选做，加着玩的）
为每个隐藏的内容区域：
使用 Math.random() 和 Math.round() 生成一个6位的随机数，表示十六进制颜色代码。
将这个随机颜色赋值给div_list[k].style.background。
var bg = "";
for (var i = 0; i < 6; i++) {bg = bg + Math.round(Math.random() * 9);
}
div_list[k].style.background = "#" + bg;
6、完整代码
HTML：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>table切换</title><script src="table.js" defer></script><style>*{padding:0;margin: 0;}.container{width: 100%;height: 400px;/* background:yellow; */margin: 100px auto; }.container .btns{display: flex;width: 80%;justify-items: center;margin: auto;}.container .btns li{width: 40%;list-style-type: none;border:1px solid plum;border-bottom: 0px;padding: 5px 7px;margin-right: 4px;cursor:pointer;border-radius: 4px;display: flex;justify-content: center;}.container .btns li.current{background:plum;color:#ffff;display: flex;justify-content: center ;}.container .content{border:2px solid plum;height: 300px;border-radius: 0px 40px 0px 40px;}.container .content div{height: 100%;/* 隐藏元素 */display: none;color: aliceblue;}.container .content div:nth-child(1){display: block;}</style>
</head>
<body><div class="container"><ul class="btns"><li class="current"><a href="#">首页</a></li><li><a href="#">机构简介</a></li><li><a href="#">招生工作</a></li><li><a href="#">培养工作</a></li><li><a href="#">学位管理</a></li><li><a href="#">学位点建设</a></li><li><a href="#">专业学位</a></li><li><a href="#">导师管理</a></li><li><a href="#">学生工作</a></li><li><a href="#">文件汇编</a></li><li><a href="#">下载专区</a></li></ul><div class="content"><div>内容1</div><div>内容2</div><div>内容3</div><div>内容4</div><div>内容5</div><div>内容6</div><div>内容7</div><div>内容8</div><div>内容9</div><div>内容10</div><div>内容22</div><div>内容33</div></div></div>
</body>
</html>js：
var li_list = document.querySelectorAll(".btns li")
var div_list = document.querySelectorAll(".content div")
console.log(li_list)for(var i = 0;i<li_list.length;i++){// 给每个标题按钮绑定index属性li_list[i].setAttribute("index",i)li_list[i].onclick = function(){//样式切换for(var j = 0;j<li_list.length;j++){li_list[j].className=""}this.className = "current"// 内容切换var num = this.getAttribute("index")for(var k = 0;k<div_list.length;k++){if(k==num){//元素显示div_list[k].style.display = "block"}else{div_list[k].style.display = "none"var bg = ""for(var i=0;i<6;i++){bg = bg +Math.round(Math.random()*9)}div_list[k].style.background = "#"+bg;}}}
}
