Heim > Artikel > Web-Frontend > JavaScript implementiert einfache Tab-Switching_Javascript-Fähigkeiten

JavaScript implementiert einfache Tab-Switching_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:21:391009Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der benutzerdefinierten tag_jquery von jQuery MobileNächster Artikel：Detaillierte Erläuterung der benutzerdefinierten tag_jquery von jQuery Mobile

In Verbindung stehende Artikel

Mehr sehen