你的位置:首页 > 软件开发 > Java > JavaScript 几种简单的table切换

JavaScript 几种简单的table切换

发布时间:2015-12-31 15:00:18
方法一:for循环+if判断当前点击与自定义数组是否匹配<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t ...

JavaScript 几种简单的table切换

JavaScript 几种简单的table切换

<!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>
<!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>
<!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 几种简单的table切换

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。