分享幾種比較簡單實用的JavaScript tabel切換

更新時間：2015年12月31日 14:22:23 作者：Cakty、Riven

這篇文章主要分享幾種比較簡單實用的JavaScript tabel切換的相關資料,需要的朋友可以參考下

閑著沒事,隨便寫了個簡單的JavaScript tabel切換,大家有興趣的看看,有需要的就拿去吧.廢話不說了,大家看代碼吧

方法一：for循環(huán)+if判斷當前點擊與自定義數(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é)點
 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";
    //給當前的(點擊的那個)那個button添加樣式
    this.style.backgroundColor = "yellow";
    //隱藏所有的div
    divArr[j].style.display = "none";
    //判斷當前點擊是按鈕數(shù)組中的哪一個？
    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+匿名函數(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>

以上內(nèi)容是小編給大家分享幾種比較簡單實用的JavaScript tabel切換，希望大家喜歡。

您可能感興趣的文章: