4種JavaScript實(shí)現(xiàn)簡單tab選項(xiàng)卡切換的方法
本文實(shí)例講解了4種JavaScript實(shí)現(xiàn)簡單tab選項(xiàng)卡切換的方法,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
方法一:for循環(huán)+if判斷當(dāng)前點(diǎn)擊與自定義數(shù)組是否匹配
<!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"> //定義數(shù)組并獲取數(shù)組內(nèi)各個的節(jié)點(diǎn) 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循環(huán)遍歷button數(shù)組長度 for(var j = 0; j < buttonArr.length; j++) { //重置所有的button樣式 buttonArr[j].style.backgroundColor = "#ccc"; //給當(dāng)前的(點(diǎn)擊的那個)那個button添加樣式 this.style.backgroundColor = "yellow"; //隱藏所有的div divArr[j].style.display = "none"; //判斷當(dāng)前點(diǎn)擊是按鈕數(shù)組中的哪一個? if(this == buttonArr[j]) { // alert(j); //顯示點(diǎn)擊按鈕對應(yīng)的div divArr[j].style.display = "block"; } } } } </script> </body> </html>
方法二:自定義index為當(dāng)前點(diǎn)擊
<!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+匿名函數(shù)的自執(zhí)行
<!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){ //匿名函數(shù)自執(zhí)行 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>
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊兩個精彩的專題:javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- 使用vue.js寫一個tab選項(xiàng)卡效果
- Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
- Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
- js簡單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法
- JS實(shí)現(xiàn)滑動菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
- js實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- js開發(fā)插件實(shí)現(xiàn)tab選項(xiàng)卡效果
相關(guān)文章
JS二級菜單不同實(shí)現(xiàn)方法分析【4種方法】
這篇文章主要介紹了JS二級菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下2018-12-12詳解ES6數(shù)組方法find()、findIndex()的總結(jié)
這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05如何使用pm2快速將項(xiàng)目部署到遠(yuǎn)程服務(wù)器
這篇文章主要介紹了如何使用pm2快速將項(xiàng)目部署到遠(yuǎn)程服務(wù)器,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03JavaScript實(shí)現(xiàn)數(shù)組降維詳解
大家都知道將多維數(shù)組(尤其是二維數(shù)組)轉(zhuǎn)化為一維數(shù)組是業(yè)務(wù)開發(fā)中的常用邏輯,除了使用樸素的循環(huán)轉(zhuǎn)換以外,我們還可以利用Javascript的語言特性和數(shù)據(jù)結(jié)構(gòu)的思想實(shí)現(xiàn)更為簡潔優(yōu)雅的轉(zhuǎn)換。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組降維吧。2017-01-01js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法
這篇文章主要介紹了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-02-02js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果,實(shí)例分析了javascript鼠標(biāo)事件及頁面樣式的操作技巧,需要的朋友可以參考下2015-05-05