原生js实现选项卡功能
程序员文章站
2023-11-23 17:57:58
效果图:
代码如下:
效果图:
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #ff0000;display: none;} .active{background: red;} </style> <script> window.onload=function(){//原生js选项卡写法 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 = 'none'; } this.classname= 'active'; acon[this.index].style.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;">11111111111</div> <div>22222222222</div> <div>333333333333</div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: 分享Nginx下10个安全问题提示
下一篇: PDO::rollBack讲解