原生JS与jQuery编写简单选项卡
程序员文章站
2022-07-06 20:56:52
本文实例为大家分享了js编写简单选项卡的具体代码,供大家参考,具体内容如下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 李处耘:北宋名将,帮宋太祖平定南楚