JavaScript实现简单的tab选项卡切换

2019-11-20 10:51:23

字体：大中小

来源：转载

供稿：网友

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>table切换</title>  <style type="text/css">    *{      padding:     }    button{      width: 95px;    }    .active {      background-color: yellow;    }    #wrap{      width:510px;      overflow: hidden;      margin:0 auto;    }    #inner{      width:9999px;      overflow: hidden;      position: relative;      left:0;      transition: left 0.6s;    }    #inner a {      float: left;    }    #inner img {      display: block;      width:510px;    }    #main{      text-align: center;    }  </style></head><body> <div id="wrap">  <div id="inner">    <a href="###"><img src="img/1.jpg"></a>    <a href="###"><img src="img/2.jpg"></a>    <a href="###"><img src="img/3.jpg"></a>    <a href="###"><img src="img/4.jpg"></a>    <a href="###"><img src="img/5.jpg"></a>  </div> </div> <div id="main">  <button>1</button>  <button>2</button>  <button>3</button>  <button>4</button>  <button>5</button> </div> <script type="text/javascript">   //获取节点   var btnList = document.getElementsByTagName("button");   var inner = document.getElementById("inner");   //可见宽度   var perWidth = inner.children[0].offsetWidth;   //添加事件     for(var i = 0; i < btnList.length; i++) {    btnList[i].index = i;    btnList[i].onclick = function() {      inner.style.left = -perWidth * this.index + "px";      for(var j = 0; j < btnList.length; j++) {        btnList[j].className = "";      }      this.className = "active";    }  } </script></body></html>

希望本文所述对大家学习javascript程序设计有所帮助，熟练掌握选项卡切换操作。

上一篇：基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

下一篇：javascript实现简单的全选和反选功能