JS에서 탭을 만드는 방법-JS 튜토리얼-php.cn

JS에서 탭을 만드는 방법

php中世界最好的语言

풀어 주다： 2017-12-31 10:05:57

원래의

2437명이 탐색했습니다.

이번에 보여드릴 내용은 JS로 탭을 만드는 방법입니다. 탭은 우리가 프로젝트에서 자주 사용하는 기능인데 어떻게 구현하나요? 이 기사는 당신에게 좋은 분석을 제공할 것입니다.

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