内容描述：通过不同的按钮显示不同的页面，用js实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用js实现选项卡</title>
<style>
/*class的css写法*/
.active {
background-color: gold;
}
/*某一个标签下的标签的css写法*/
#div1 div {
width: 100px;
height: 100px;
border: 1px solid gray;
background-color: lavenderblush;
display: none;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var button = oDiv.getElementsByTagName('input');
var oDiv1 = oDiv.getElementsByTagName('div');
for (var i = 0; i < button.length; i++) {
button[i].index = i;
button[i].onclick = function () {
for (var i = 0; i < button.length; i++) {
//在发生点击后，先把所有的div隐藏和背景颜色隐藏
button[i].className = '';
oDiv1[i].style.display = 'none';
}
//this是表示当前的点击位置
this.className = 'active';
// this.className = 'active';
oDiv1[this.index].style.display = 'block';
//alert(this.value);
};
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" id="button1" value="选项1" class="active">
<input type="button" id="button2" value="选项2">
<input type="button" id="button3" value="选项3">
<input type="button" id="button4" value="选项4">
<div style="display: block">这是选项卡1</div>
<div>这是选项卡2</div>
<div>这是选项卡3</div>
<div>这是选项卡4</div>
</div>
</body>
</html>代码介绍：
这里用了四个input标签和四个div标签，用class来对button按钮的颜色进行控制，this在这里的作用是表示当前对象，this.index就表示当前的编号，用onclick方法来对四个button的点击进行监听，完成逻辑程序。
效果图：
初始图：
点击选项二：
点击选项三：
扫描二维码关注公众号，回复：
14835176 查看本文章
点击选项四：
