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

来源：动视网责编：小OO 时间：2020-11-27 22:26:40

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

本文实例为大家分享了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>；<

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了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编写简单选项卡的具体代码，供大家参考，具体内容如下

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

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

推荐度：

点击下载本文 文档为doc格式

标签：简单实现原生

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐