js之选项卡（tag标签）
程序员文章站
2022-04-13 17:45:20
目标效果：点击不同按钮显示不同内容 代码如下 ......
目标效果：点击不同按钮显示不同内容
代码如下
<!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>
上一篇： 简述FTP主动模式与被动模式