JS-tab标签页（原生）
关于案例
tab标签页的关键在于，页面元素active状态的控制，其次data-是H5提供的数据关联属性，我这里自定义了索引也就是data-index,通过他给返回的 HTML元素类数组或者节点类数组进行遍历，已找到自己需要的元素。
event.target是事件的元素；
另外，classList属性是指当前元素的样式属性。我们通过他的remove()和add()方法实现，元素样式的移除和添加。
运行效果
案例代码
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Tab选项卡</title><style>*{margin: 0;padding: 0;}body{background-color:#cccccc;font-size: 13px;}h2{height: 50px;line-height: 50px;text-align: center;}ul{list-style: none;}.tab-container{width: 600px;height: 400px;background-color: #ffffff;margin:0 auto;border-radius: 6px;}.tab-nav{height: 40px;}.tab-nav >ul{font-size: 1.1rem;margin: 0 5px;}.tab-nav >ul>li{line-height: 40px;text-align: center;padding: 0 20px;float: left;}.tab-nav >ul>li:hover{cursor: pointer;}.tab-content{height: 316px;border-top: #dfdede solid 1px;padding: 20px;}.detail{display: none;}.detail.active {display: block;border: none;}.tab-content li{line-height: 25px;list-style-type:disc;margin-left: 20px;}.active{border-bottom: #f80303 solid 1px;}</style></head><body><h2>Tab选项卡</h2><div class="tab-container"><div class="tab-nav"><ul><li class="active" data-index="1">技术文章</li><li data-index="2">网站源码</li><li data-index="3">原生手册</li><li data-index="4">推荐博文</li></ul></div><div class="tab-content"><div class="detail active" data-index="1"><ul><li>CSS制作轮播图</li><li>Chrome调试小技巧</li><li>Excel自动生成日期</li><li>Tab选项卡的控制</li></ul></div><div class="detail" data-index="2"><ul><li>Admin客户关系管理系统</li><li>Bootstrap前端框架</li><li>layui后端框架</li><li>Laravel-PHP框架</li></ul></div><div class="detail" data-index="3"><ul><li>手册-1</li><li>手册-2</li><li>手册-3</li><li>手册-4</li></ul></div><div class="detail" data-index="4"><ul><li>浅谈SEO优化</li><li>PHP的闭包和异常处理</li><li>MySQLi常见问题</li><li>jQuery的基本语法</li></ul></div></div></div><script src="js/tab.js"></script></body></html>
tab.js
//获取导航标签var tabNav=document.querySelector('.tab-nav');//获取导航中所有的 li 并且转换为真正的数组var navArr=Array.from(tabNav.firstElementChild.children);//获取所有标签导航对应的详情页var tabDetails=document.querySelectorAll('.detail');/** 利用冒泡的原理，将tab-nav下 li 的点击事件，绑定到 tab-nav的上面；* 同理 将详情页的 li 的显示事件 也绑定到 detail中*/tabNav.addEventListener('click',displayDetail,false);//监听tab标签 点击事件的函数function displayDetail(event){//1.清空原来tab激活标签的样式，并且设置当前正在被点击的标签的激活样式//classList是当前页面样式表选择器列表，其包含remove add replacenavArr.forEach(function(tab){tab.classList.remove('active');});event.target.classList.add('active');//情况当前激活的标签样式，并且判断，是否存在和正//在被点击的 tab标签导航的 data-index一样的详情页，有就显示tabDetails.forEach(function(detail) {detail.classList.remove('active')});tabDetails.forEach(function(detail) {// 详情内容data-index与标签导航的data-index相等就显示出来if (detail.dataset.index === event.target.dataset.index) {detail.classList.add('active');}});}
特别鸣谢
截止到目前，感觉自己在PHP中文网的培训中学到了很多，非常感谢老师的辛勤付出，也希望自己能学到有用的知识！
同时，也感谢PHP中文网这个平台!
