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

本文实例讲解了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程序设计有所帮助，熟练掌握选项卡切换操作。