这篇文章主要介绍了 JavaScript 实现简单的 tab 选项卡切换的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
具体代码:
- <!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 程序设计有所帮助,熟练掌握选项卡切换操作。
来源: http://www.phperz.com/article/17/0418/267726.html