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)