Home > Article > Web Front-end > How to make tabs in JS

How to make tabs in JS

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

What I will show you this time is how to make tabs with JS. Tabs are a function we often use in projects. How to implement them? This article will give you a good analysis.

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

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to make tabs in JS

Related articles