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

作者：Cakty、Riven 时间：2024-06-17 06:22:43　

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

标签：JavaScript,tab

投稿

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

猜你喜欢

详解JavaScript匿名函数和闭包

Makefile构建Golang项目示例详解

不是原型继承那么简单！prototype的深度探索

对python中 math模块下 atan 和 atan2的区别详解

Redis中3种特殊的数据类型（BitMap、Geo和HyperLogLog）

Python GUI库Tkiner使用方法代码示例

围观tangram js库

python实现整数序列求和

Go中时间与时区问题的深入讲解

python编辑用户登入界面的实现代码

Python实现堆排序的方法详解

jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

python web框架Flask实现图形验证码及验证码的动态刷新实例

pycharm打开命令行或Terminal的方法

解决Python图形界面中设置尺寸的问题

PyGame贪吃蛇的实现代码示例

js中eval()函数和trim()去掉字符串左右空格应用

oracle 更改数据库名的方法

python 中open文件路径的选择问题解析

JS实现数组/对象数组删除其中某一项