首頁 > 開發者 > JavaScript
4種JavaScript實現簡單tab選項卡切換的方法，javascripttab
本文執行個體講解了4種JavaScript實現簡單tab選項卡切換的方法，分享給大家供大家參考，具體內容如下
：
方法一：for迴圈+if判斷當前點擊與自訂數組是否匹配
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切換</title> <style type="text/css"> button { width:120px; height: 32px; line-height: 32px; background-color: #ccc; font-size: 24px; } div { display: none; width:200px; height: 200px; font-size: 72px; color:#ddd; background-color: green; border:1px solid black; } </style></head><body> <button style="background-color: yellow;">1</button> <button>2</button> <button>3</button> <button>4</button> <div style="display:block;">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> //定義數組並擷取數組內各個的節點 var buttonArr = document.getElementsByTagName("button"); var divArr = document.getElementsByTagName("div"); for(var i = 0; i < buttonArr.length;i++) { buttonArr[i].onclick = function() { //this // alert(this.innerHTML) //for迴圈遍曆button數組長度 for(var j = 0; j < buttonArr.length; j++) { //重設所有的button樣式 buttonArr[j].style.backgroundColor = "#ccc"; //給當前的(點擊的那個)那個button添加樣式 this.style.backgroundColor = "yellow"; //隱藏所有的div divArr[j].style.display = "none"; //判斷當前點擊是按鈕數組中的哪一個？ if(this == buttonArr[j]) { // alert(j); //顯示點擊按鈕對應的div divArr[j].style.display = "block"; } } } } </script></body></html>
方法二：自訂index為當前點擊
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切換</title> <style type="text/css"> button { width:120px; height: 32px; line-height: 32px; background-color: #ccc; font-size: 24px; } div { display: none; width:200px; height: 200px; font-size: 72px; color:#ddd; background-color: green; border:1px solid black; } </style></head><body> <button style="background-color: yellow;">1</button> <button>2</button> <button>3</button> <button>4</button> <div style="display:block;">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> var buttonArr = document.getElementsByTagName("button"); var divArr = document.getElementsByTagName("div"); for(var i = 0; i < buttonArr.length;i++) { buttonArr[i].index = i; // buttonArr[i].setAttribute("index",i); buttonArr[i].onclick = function() { for(var j = 0; j < buttonArr.length; j++) { buttonArr[j].style.backgroundColor = "#ccc"; buttonArr[this.index].style.backgroundColor = "yellow"; divArr[j].style.display = "none"; divArr[this.index].style.display = "block"; } } } </script></body></html>
方法三：className
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> * {padding:0; margin:0;} button { background-color: #ccc; width:80px; height: 30px; } .btn-active { background-color: yellow; font-weight:bold; font-size: 14px; } div{ width:200px; height: 200px; font-size: 64px; background-color: #0c0; display: none; color:#fff; } .div-active { display: block; } </style></head><body> <button class="btn-active">按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <div class="div-active">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> //1.先擷取元素 var buttonList = document.getElementsByTagName("button"); var divList = document.getElementsByTagName("div"); //2.添加事件 for(var i = 0; i < buttonList.length; i++) { buttonList[i].index = i; buttonList[i].onclick = function() { for(var j = 0; j < buttonList.length;j++) { buttonList[j].className = ""; divList[j].className = ""; } this.className = "btn-active"; divList[this.index].className = "div-active"; } } </script></body></html>
方法四：className+匿名函數的自執行
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> * {padding:0; margin:0;} button { background-color: #ccc; width:80px; height: 30px; } .btn-active { background-color: yellow; font-weight:bold; font-size: 14px; } div{ width:200px; height: 200px; font-size: 64px; background-color: #0c0; display: none; color:#fff; } .div-active { display: block; } </style></head><body> <button class="btn-active">按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <div class="div-active">1</div> <div>2</div> <div>3</div> <div>4</div> <script type="text/javascript"> //1.先擷取元素 var buttonList = document.getElementsByTagName("button"); var divList = document.getElementsByTagName("div"); //2.添加事件 for(var i = 0; i < buttonList.length; i++) { (function(i){ //匿名函數自執行 buttonList[i].onclick = function() { for(var j = 0; j < buttonList.length;j++) { buttonList[j].className = ""; divList[j].className = ""; } this.className = "btn-active"; divList[i].className = "div-active"; } })(i) } </script></body></html>
希望本文所述對大家學習javascript程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
