一、知识要点
1、自定义下标属性
2、综合使用getElementsByTagName
二、源码参考
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#div1,
#div2,
#div3 {
width: 200px;
height: 100px;
border: 1px solid #999;
}
</style>
<script>
window.onload = function() {
var tab = document.getElementsByTagName('input');
var show = document.getElementsByTagName('div');
tab[0].style.background = 'red';
show[1].style.display = 'none';
show[2].style.display = 'none';
for(var i = 0; i < tab.length; i++) {
tab[i].index = i;
tab[i].onclick = function() {
for(var j = 0; j < tab.length; j++) {
tab[j].style.background = '';
show[j].style.display = 'none';
}
this.style.background = 'red';
show[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="tab1" />
<input type="button" name="btn2" id="btn2" value="tab2" />
<input type="button" name="btn3" id="btn3" value="tab3" />
<div id="div1">
1111
</div>
<div id="div2">
2222
</div>
<div id="div3">
3333
</div>
</body>
</html>
三、运行效果
QQ20190328-190251.gif
网友评论