當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 几种简单的table切换
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 几种简单的table切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一：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>
轉載于:https://www.cnblogs.com/CaktyRiven/p/5090965.html
總結
以上是生活随笔為你收集整理的JavaScript 几种简单的table切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 教程-Delphi第三方控件安装卸载指南
- 下一篇： gradle idea java ssm