分享几种比较简单实用的JavaScript tabel切换

作者：bea

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧方法一：for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"&

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧

方法一：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 tabel切换，希望大家喜欢。

有用 | 无用

分享几种比较简单实用的JavaScript tabel切换

猜你喜欢

您可能感兴趣的文章: