效果如下:
<html>
<head>
<style>
ul input {
font-size: 22px;
height: 36px;
border: 0px;
outline: 0;
text-align: center;
display: block;
padding: 10px;
float: left;
}
.active {
background-color: white;
}
.tab_main {
display: none;
height: 800px;
width: 800px;
background-color: aliceblue;
text-align: center;
}
.clear {
clear: both
}
</style>
</head>
<body>
<div>
<ul>
<input type="button" value="页面一">
<input type="button" value="页面二">
<input type="button" value="页面三">
<input type="button" value="页面四">
<input type="button" value="页面五">
<input type="button" value="页面六">
</ul>
</div>
<div class="clear"></div>
<!-- 用于清除之前设置的float属性 -->
<div class="tab_main">页面一</div>
<div class="tab_main">页面二</div>
<div class="tab_main">页面三</div>
<div class="tab_main">页面四</div>
<div class="tab_main">页面五</div>
<div class="tab_main">页面六</div>
</body>
<script>
window.onload = function () {
var inputarr = document.getElementsByTagName("input");//将所有input生成为一个集合
var divarr = document.getElementsByClassName("tab_main");//将所有类名为tab_main的元素生成为一个集合
for (var i = 0; i < inputarr.length; i++) { // 获取按钮数组的下标
inputarr[i].index = i; // 点击按钮触发
inputarr[i].onclick = function () {
for (var
j = 0; j < inputarr.length; j++) {
inputarr[j].className = ""; //清空active类
} // 将所有div设置为不显示
for (var
k = 0; k < divarr.length; k++) { divarr[k].style.display = "none"; } //将点击的按钮设置为active类
inputarr[this.index].className = "active"; //将点击的按钮对应的div显示
divarr[this.index].style.display = "block";
}
}
}
</script>
</html>