Heim > Artikel > Web-Frontend > So erstellen Sie Tabs in JS

So erstellen Sie Tabs in JS

php中世界最好的语言Original: 2017-12-31 10:05:572310Durchsuche

Was ich Ihnen dieses Mal zeigen werde, ist, wie man Tabs mit JS erstellt. Tabs sind eine Funktion, die wir häufig in Projekten verwenden. Dieser Artikel gibt Ihnen eine gute Analyse.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery选项卡</title>
  <style type="text/css">
  #div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}
  .active{background:#999;}
  </style>
  
  <!-- 原生的JS -->
  <script type="text/javascript">
  window.onload=function(){
    var oDiv=document.getElementById(&#39;div1&#39;);
    var aInput=document.getElementsByTagName(&#39;input&#39;);
    var aCon=oDiv.getElementsByTagName(&#39;div&#39;);
  
    for (var i = 0; i < aInput.length; i++) {
  
      aInput[i].index=i;
  
      aInput[i].onclick=function(){
        for (var i = 0; i < aInput.length; i++) {
          aInput[i].className=&#39;&#39;;
          aCon[i].style.display=&#39;&#39;;
        }
  
        this.className=&#39;active&#39;;
        aCon[this.index].style.display=&#39;block&#39;;
      }
    }
  }
  </script>
  
  
  <!-- jquery写法 -->
  <script type="text/javascript" src=&#39;../jquery-3.2.1.min.js&#39;></script>
  <script type="text/javascript">
  $(function(){
    $(&#39;#div1&#39;).find(&#39;input&#39;).click(function(){
      $(&#39;#div1&#39;).find(&#39;input&#39;).attr(&#39;class&#39;,&#39;&#39;);
      $(&#39;#div1&#39;).find(&#39;div&#39;).css(&#39;display&#39;,&#39;none&#39;);
      $(this).attr(&#39;class&#39;,&#39;active&#39;);
      $(&#39;#div1&#39;).find(&#39;div&#39;).eq($(this).index()).css(&#39;display&#39;,&#39;block&#39;);
    })
  })
  </script>
</head>
<body>
  <div id="div1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display: block;">11111</div>
    <div>22222</div>
    <div>33333</div>
  </div>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie die benutzerdefinierten Anweisungen von Vue, um ein Dropdown-Menü zu vervollständigen

Über HTTP/2-Server-Push

Verwendung von jQuery zum Deduplizieren und Sortieren von Arrays

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Tabs in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Teilen Sie Beispiele für die Unterschiede zwischen .bind(), .live(), .delegate() und .on() in JqueryNächster Artikel：Teilen Sie Beispiele für die Unterschiede zwischen .bind(), .live(), .delegate() und .on() in Jquery

In Verbindung stehende Artikel

Mehr sehen