网络编程
位置：首页>> 网络编程>> JavaScript>> JavaScript实现简单的tab选项卡切换

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

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

标签：JavaScript,tab

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com