0036-0038.选项卡案例 · 原生js-2020

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培训 - 微信：18310612838</title>  <link rel="stylesheet" href="reset.min.css"> <style> .tabBox { margin: 20px auto; width: 500px; } .tabBox .tab { position: relative; top: 1px; } .tabBox .tab li { float: left; margin-right: 10px; padding: 0 10px; height: 35px; line-height: 35px; font-size: 14px; border: 1px solid #AAA; background: #f6f7fb; cursor: pointer; } .tabBox .tab li.active { background: #FFF; border-bottom-color: #FFF; } .tabBox div { display: none; padding: 10px; height: 100px; border: 1px solid #AAA; background: #FFF; } .tabBox div.active { display: block; } </style> </head> <body>  <section class="tabBox" id="tabBox">  <ul class="tab clearfix"> <li class="active">编程</li> <li>读书</li> <li>运动</li> </ul>  <div class="active">编程可以使我“赚取高薪”</div> <div>读书可以使我“修身养性”</div> <div>运动可以使我“身体健康”</div> </section>  <script> /* * 点击.TAB-BOX的LI中的任意一个，都让当前点击的这个LI和其对应的DIV有选中的样式（CLASS='ACTIVE'），因为只能同时选中一个，所以还需要让除点击这个LI以外的LI和对应的DIV移除ACTIVE选中的样式 => 换一个思路：点击某一个LI，我先让所有的LI和DIV都移除选中的样式，接着让当前点击的LI和DIV有选中样式 * 1.想要操作谁，就先获取谁 * 2.事件绑定 * 3.实现点击LI要处理的事情 */ /* // 获取TAB-BOX及其后代中的三个LI和三个DIV（范围限定在获取TAB-BOX中的） var tabBox = document.getElementById('tabBox'), tabList = tabBox.getElementsByTagName('li'), contentList = tabBox.getElementsByTagName('div'); // 分别给三个LI绑定点击事件 tabList[0].onclick = function () { // 先让所有的LI和DIV移除选中样式（循环：TAB-LIST中有多少个LI，我们就让其循环多少次） for (var i = 0; i < tabList.length; i++) { // tabList[i] 当前循环中要操作的那个LI tabList[i].className = ''; contentList[i].className = ''; } // 再让第一个LI和DIV有选中样式 tabList[0].className = 'active'; contentList[0].className = 'active'; }; tabList[1].onclick = function () { for (var i = 0; i < tabList.length; i++) { tabList[i].className = ''; contentList[i].className = ''; } tabList[1].className = 'active'; contentList[1].className = 'active'; }; tabList[2].onclick = function () { for (var i = 0; i < tabList.length; i++) { tabList[i].className = ''; contentList[i].className = ''; } tabList[2].className = 'active'; contentList[2].className = 'active'; }; */ </script> <script> var tabBox = document.getElementById('tabBox'), tabList = tabBox.getElementsByTagName('li'), contentList = tabBox.getElementsByTagName('div'); // * 优化：利用函数封装的机制，把点击每一个LI要处理的事情（这些事情基本都一样）进行封装，以此来减少页面中的冗余代码 function changeTab(index) { // 1.清空所有LI和DIV的选中样式 for (var i = 0; i < tabList.length; i++) { tabList[i].className = ''; contentList[i].className = ''; } // // 2.让点击的这个LI和DIV有选中样式（但是创建函数的时候，还不知道点击的是哪一个LI呢，只有点击的时候才知道，此时我们要把点击的是哪一个作为形参，提供对应的入口） =>index形参变量：点击的是谁，就在执行changeTab的时候，把点击这一项的索引传递给我 tabList[index].className = 'active'; contentList[index].className = 'active'; } // // 分别给三个LI绑定点击事件 tabList[0].onclick = function () { changeTab(0); }; tabList[1].onclick = function () { changeTab(1); }; tabList[2].onclick = function () { changeTab(2); }; </script> <script> var tabBox = document.getElementById('tabBox'), tabList = tabBox.getElementsByTagName('li'), contentList = tabBox.getElementsByTagName('div'); function changeTab(index) { for (var i = 0; i < tabList.length; i++) { tabList[i].className = ''; contentList[i].className = ''; } tabList[index].className = 'active'; contentList[index].className = 'active'; } for (var i = 0; i < tabList.length; i++) { tabList[i].zhufeng = i; tabList[i].onclick = function () { changeTab(this.zhufeng); }; } /* * 循环绑定点击事件（而不是一个个的绑定） * 基于自定义属性解决方案实现：在之前的某个阶段，把一些信息当做自定义属性赋值给元素对象，到后期，需要用到这些值的时候，我们从自定义属性中获取到即可 */ /* for (var i = 0; i < tabList.length; i++) { //=>tabList[i] 获取到的LI元素对象（堆，有很多内置的属性，也可以设置自定义属性的） // 每一轮循环的时候，给当前元素对象的堆内存中设置一个自定义属性zhufeng，属性值存储当前LI元素对象的索引 // tabList = { // 0:{zhufeng:0}, // 1:{zhufeng:1}, // ... // } tabList[i].zhufeng = i; tabList[i].onclick = function () { // 传递当前点击这个LI的索引 // this => 当前点击的这个LI，而我们基于它的自定义属性zhufeng，就可以拿到它的索引 changeTab(this.zhufeng); }; } */ //=>现在必须会的是自定义属性 /* for (var i = 0; i < tabList.length; i++) { tabList[i].zhufeng = i; //zhufeng保存了i的值 tabList[i].onclick = function () { changeTab(this.zhufeng); }; } */ /* 后期会讲的方案 */ /* // 闭包 for (var i = 0; i < tabList.length; i++) { tabList[i].onclick = (function (i) { return function () { changeTab(i); }; })(i); } */ // 基于let解决（LET和VAR的区别） /* for (let i = 0; i < tabList.length; i++) { tabList[i].onclick = function () { changeTab(i); } } */ // 这样写是不行的：点击每一个LI的时候，绑定事件函数中的i都是3（循环结束后i的结果） /* i=0 第一轮循环 i++ tabList[0].onclick = function () { 此处是创建函数，函数存储的是一堆破字符串，我们看到的i，也只是一个字符 “changeTab(i);” } i=1 第二轮循环 i++ tabList[1].onclick = function () { “changeTab(i);” } i=2 第三轮循环 i++ tabList[2].onclick = function () { “changeTab(i);” } i=3 循环结束 ........ 手欠点了第二个LI，触发第二个LI绑定的函数 changeTab(i) 此时的i已经是循环结束后的3了 */ for (var i = 0; i < tabList.length; i++) { tabList[i].onclick = function () { changeTab(i); } } /* tabList[0].onclick = function () { changeTab(0); }; tabList[1].onclick = function () { changeTab(1); }; tabList[2].onclick = function () { changeTab(2); }; */ </script> </body> </html> ~~~ ![](https://img.kancloud.cn/0e/0e/0e0ebafe50e914dac38a184f3953fde0_1249x499.png)