JavaScript implementiert einfache Tab-Switching_Javascript-Fähigkeiten-js-Tutorial-php.cn

JavaScript implementiert einfache Tab-Switching_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:21:39

Original

1007 Leute haben es durchsucht

In diesem Artikel wird der Beispielcode für den einfachen Tab-Wechsel mit JavaScript erläutert und Ihnen als Referenz zur Verfügung gestellt. Der spezifische Inhalt lautet wie folgt:

Rendering:

Spezifischer Code:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel Ihnen dabei hilft, die JavaScript-Programmierung zu erlernen und sich mit Tab-Wechselvorgängen vertraut zu machen.