js之选项卡(tag标签)
程序员文章站
2022-07-06 11:54:15
目标效果:点击不同按钮显示不同内容 代码如下 ......
目标效果:点击不同按钮显示不同内容
代码如下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> input{background-color: white} .click{background-color: darkcyan} div{width: 200px;height: 200px;background-color: antiquewhite;display: none} </style> <script type="text/javascript"> window.onload=function () { var ainput = document.getelementsbytagname('input');//获取所有input标签 var adiv = document.getelementsbytagname('div');//获取所有div标签 var i = 0 for (i=0;i<ainput.length;i++) { ainput[i].index = i ainput[i].onclick=function ()//循环点击input标签 { for(i=0;i<ainput.length;i++)//循环清除input标签和div标签样式某些属性 { ainput[i].classname=''; adiv[i].style.display='none'; } // alert('点击'+this.index+'个按钮'); adiv[this.index].style.display='block';//当前input所对应的显示div this.classname='click'; } } } </script> </head> <body> <input type="button" value="1"> <input type="button" value="2"> <div>000</div> <div>111</div> </body> </html>
上一篇: 001.常见监控简介
下一篇: 利用java实现一个简单的链表结构