How to make tabs in JS-JS Tutorial-php.cn

How to make tabs in JS

php中世界最好的语言

Release： 2017-12-31 10:05:57

Original

2308 people have browsed it

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>

Copy after login

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!