tab欄切換原理
本文是我學(xué)習(xí)tab欄切換時的筆記,步驟很詳細。比較適用于JavaScript初學(xué)者
1.基礎(chǔ) - 排他思想
如圖,點擊任意一個按鈕,當(dāng)前按鈕應(yīng)該顯示橘色,其他顯示默認顏色灰色。
代碼運行步驟:
利用for循環(huán)遍歷5個按鈕;
選中的按鈕進行 onclick 事件時,首先刪除所有按鈕的類名,使其全部顯示灰色(34行);
然后給當(dāng)前點擊的按鈕添加指定類名,使其顯示橘色(37行)。
示例代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab欄切換效果</title> <style media="screen"> *{ margin: 0; padding: 0; border: 0 none; outline: none; } #btns{ width: 300px; margin: 100px auto; } #btns button { width: 60px; height: 30px; float: left; border-right: 1px solid #ccc; } .color{ background-color: #eb923f; } </style> <script type="text/javascript"> window.onload = function () { var btns = document.getElementById("btns").getElementsByTagName("button"); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { for (var j = 0; j < btns.length; j++) { //把所有的button清空類名 btns[j].className = ""; } //點擊的那個盒子添加指定類名 this.className = "color"; } } } </script> </head> <body> <div id="btns"> <button class="color">按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <button>按鈕5</button> </div> </body> </html>
2.tab欄切換
如圖:在排他思想的基礎(chǔ)上,五個按鈕底下添加五個新盒子,并用一個大盒子將按鈕和底下的盒子包裹。
底下的盒子全部隱藏,默認只顯示第一個。
新增步驟:
為btns[i]添加自定義屬性index,用來關(guān)聯(lián)下面的大盒子(42行);
點擊按鈕后先讓底下的盒子全部隱藏(54行);
然后給當(dāng)前所點擊按鈕相關(guān)聯(lián)的盒子添加指定屬性(57行)。
示例代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab欄切換效果</title> <style media="screen"> *{ margin: 0; padding: 0; border: 0 none; outline: none; } .baohan{ width: 300px; margin: 100px auto; border: 1px solid #ccc; } #btns button { width: 60px; height: 30px; float: left; border-right: 1px solid #ccc; } #divs div { width: 300px; height: 100px; font-size: 60px; padding-top: 60px; background-color: #eb923f; text-align: center; display: none; } .color{ background-color: #eb923f; } </style> <script type="text/javascript"> window.onload = function () { var btns = document.getElementById("btns").getElementsByTagName("button"); var divs = document.getElementById("divs").getElementsByTagName("div"); for (var i = 0; i < btns.length; i++) { btns[i].index = i; //自定義屬性,用于關(guān)聯(lián)下面的大盒子 btns[i].onclick = function () { for (var j = 0; j < btns.length; j++) { //把所有的button清空類名 btns[j].className = ""; } //點擊的那個盒子添加指定類名 this.className = "color"; for (var i = 0; i < divs.length; i++) { //先讓底下的div全部隱藏 divs[i].style.display = "none"; } //然后給當(dāng)前所點擊按鈕相關(guān)聯(lián)的盒子添加指定屬性 divs[this.index].style.display = "block"; } } } </script> </head> <body> <div class="baohan"> <div id="btns"> <button class="color">按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <button>按鈕5</button> </div> <div id="divs"> <div style="display:block;">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
酷! 不同風(fēng)格頁面布局幻燈片特效js實現(xiàn)
這篇文章主要為大家詳細介紹了超酷不同風(fēng)格頁面布局幻燈片特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08javascript中等于(==)與全等(===)的區(qū)別說明
等于(==)的情況下 只要值相同就返回True。而全等(===)的時候需要值和類型都要匹配才能返回True.2011-01-01使用JavaScript解決網(wǎng)頁圖片拉伸問題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁圖片拉伸問題,本文給大家介紹的非常詳細,具有參考借鑒價值,感興趣的朋友一起看看吧2016-11-11JavaScript實現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時回調(diào)地獄的問題,大家應(yīng)該也不陌生了,今天來學(xué)習(xí)一下?promise?的實現(xiàn)過程吧2023-04-04