信鸽网

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

  作者：bea

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ padding

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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: