原生JS与jQuery编写简单选项卡

2019-11-19 15:02:03

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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('div1');    var aInput=document.getElementsByTagName('input');    var aCon=oDiv.getElementsByTagName('div');    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='';          aCon[i].style.display='';        }        this.className='active';        aCon[this.index].style.display='block';      }    }  }  </script>  <!-- jquery写法 -->  <script type="text/javascript" src='../jquery-3.2.1.min.js'></script>  <script type="text/javascript">  $(function(){    $('#div1').find('input').click(function(){      $('#div1').find('input').attr('class','');      $('#div1').find('div').css('display','none');      $(this).attr('class','active');      $('#div1').find('div').eq($(this).index()).css('display','block');    })  })  </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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：ES6 javascript中class类的get与set用法实例分析

下一篇：简单实现jQuery弹窗效果