tab欄切換原理
本文是我學(xué)習(xí)tab欄切換時(shí)的筆記,步驟很詳細(xì)。比較適用于JavaScript初學(xué)者
1.基礎(chǔ) - 排他思想
如圖,點(diǎn)擊任意一個(gè)按鈕,當(dāng)前按鈕應(yīng)該顯示橘色,其他顯示默認(rèn)顏色灰色。
代碼運(yùn)行步驟:
利用for循環(huán)遍歷5個(gè)按鈕;
選中的按鈕進(jìn)行 onclick 事件時(shí),首先刪除所有按鈕的類名,使其全部顯示灰色(34行);
然后給當(dāng)前點(diǎn)擊的按鈕添加指定類名,使其顯示橘色(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 = ""; } //點(diǎn)擊的那個(gè)盒子添加指定類名 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ǔ)上,五個(gè)按鈕底下添加五個(gè)新盒子,并用一個(gè)大盒子將按鈕和底下的盒子包裹。
底下的盒子全部隱藏,默認(rèn)只顯示第一個(gè)。
新增步驟:
為btns[i]添加自定義屬性index,用來(lái)關(guān)聯(lián)下面的大盒子(42行);
點(diǎn)擊按鈕后先讓底下的盒子全部隱藏(54行);
然后給當(dāng)前所點(diǎn)擊按鈕相關(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 = ""; } //點(diǎn)擊的那個(gè)盒子添加指定類名 this.className = "color"; for (var i = 0; i < divs.length; i++) { //先讓底下的div全部隱藏 divs[i].style.display = "none"; } //然后給當(dāng)前所點(diǎn)擊按鈕相關(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>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
- Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
- 用AngularJS的指令實(shí)現(xiàn)tabs切換效果
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- 一個(gè)精簡(jiǎn)的JS DIV層tab切換代碼
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫(xiě)原生js)
- 一個(gè)js的tab切換效果代碼[代碼分離]
- javascript實(shí)現(xiàn)tab切換的四種方法
- 基于jquery的tab切換 js原理
相關(guān)文章
酷! 不同風(fēng)格頁(yè)面布局幻燈片特效js實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了超酷不同風(fēng)格頁(yè)面布局幻燈片特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08javascript中等于(==)與全等(===)的區(qū)別說(shuō)明
等于(==)的情況下 只要值相同就返回True。而全等(===)的時(shí)候需要值和類型都要匹配才能返回True.2011-01-01使用JavaScript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11JavaScript實(shí)現(xiàn)手寫(xiě)promise的示例代碼
promise?作為前端開(kāi)發(fā)中常用的函數(shù),解決了?js?處理異步時(shí)回調(diào)地獄的問(wèn)題,大家應(yīng)該也不陌生了,今天來(lái)學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過(guò)程吧2023-04-04