Home > Article > Web Front-end > Example of writing a simple tab with JS+jQuery

Example of writing a simple tab with JS+jQuery

黄舟Original: 2017-10-30 09:34:061345browse

The example in this article shares the specific code for writing simple tabs in JS for your reference. The specific content is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery选项卡</title>
  <style type="text/css">
  #p1 p{width: 200px;height: 200px;border: 1px red solid;display: none;}
  .active{background:#999;}
  </style>

  <!-- 原生的JS -->
  <script type="text/javascript">
  window.onload=function(){
    var op=document.getElementById(&#39;p1&#39;);
    var aInput=document.getElementsByTagName(&#39;input&#39;);
    var aCon=op.getElementsByTagName(&#39;p&#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;#p1&#39;).find(&#39;input&#39;).click(function(){
      $(&#39;#p1&#39;).find(&#39;input&#39;).attr(&#39;class&#39;,&#39;&#39;);
      $(&#39;#p1&#39;).find(&#39;p&#39;).css(&#39;display&#39;,&#39;none&#39;);
      $(this).attr(&#39;class&#39;,&#39;active&#39;);
      $(&#39;#p1&#39;).find(&#39;p&#39;).eq($(this).index()).css(&#39;display&#39;,&#39;block&#39;);
    })
  })
  </script>
</head>
<body>
  <p id="p1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <p style="display: block;">11111</p>
    <p>22222</p>
    <p>33333</p>
  </p>
</body>
</html>

The above is the detailed content of Example of writing a simple tab with JS+jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Examples of effects of disabling and enabling buttons in JavaScriptNext article：Examples of effects of disabling and enabling buttons in JavaScript

See more

Example of writing a simple tab with JS+jQuery

Related articles