效果图:
代码如下:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
Parallels Desktop v15.1.4-47270 商业版下载 Mac安装Windows首选虚拟机
关于LPC824Lite开发板下载程序时提示"Invalid ROM Table"
MySQL 5.7 关于 JSON 类型的子集Key/Value获取方法分享
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
网友评论