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

时间：2021-05-25

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章