<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的选项卡</title>
<style type="text/css">
#main{
height: 400px;
width: 400px;
margin: 20px auto;
}
#main>div{
height: 300px;
width: 300px;
background-color: lightpink;
color: white;
font-size: 30px;
text-align: center;
line-height: 300px;
display: none;
}
#main>div:nth-child(2){
background-color:yellow;
}
#main>div:nth-child(3){
background-color:greenyellow;
}
#main>div:nth-child(4){
background-color: #1E90FF;
}
input{
margin: 13px;
border-radius: 5px;
background-color: coral;
border: 1px solid dodgerblue;
}
.color{
background-color: red;
}
</style>
</head>
<body>
<div id="main">
<input type="button" id="but1" value="周杰伦" class="color"/>
<input type="button" id="but2" value="五月天" />
<input type="button" id="but3" value="卢广仲" />
<input type="button" id="but4" value="Eminem" />
<div style="display: block;">周杰伦的歌我全部都会唱！！</div>
<div>五月天的歌曲很好听</div>
<div>卢广仲的闽南歌很nice</div>
<div>Eminem的歌很COOL</div>
</div>
</body>
<script type="text/javascript">
//选项卡的原理，先让所有的都隐藏，然后让当前的显示
var main=document.getElementById("main");
var but=main.getElementsByTagName("input");
var div=main.getElementsByTagName("div");
//display:none 表示的是隐藏
for (var i=0;i<but.length;i++) {
but[i].index=i;//给每个按钮增加一个index，把index改成其他的也可以
but[i].onclick=function(){//绑定点击事件
for (var i=0;i<but.length;i++) {
div[i].style.display="none";//让所有div隐藏
but[i].className=" ";//用循环清除所有but的className
}
this.className="color";//给当前的but加上className，使其在点击时变色
div[this.index].style.display="block";//让当前对应的div显示
}
}
</script>
</html>
