<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box1 {
300px;
height: 300px;
margin: 100px auto;
border: #000 2px solid;
font-family: "微软雅黑";
}
#box1 a {
display: block;
float: left;
100px;
height: 40px;
line-height: 40px;
text-align: center;
background: green;
color: #fff;
text-decoration:none;
}
#box1 div {
300px;
height: 260px;
line-height:260px;
text-align: center;
font-size:40px;
display: none;
}
#box1 a.active {
background: blue;
} <!--如果上面的a标签不用后代选择器 只是一个a标签 那这儿可以写 .active 如果上面用的后代选择器 那这儿也要用后代选择器-->
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box1');
var aBtn = oBox.getElementsByTagName('a');
var aDiv = oBox.getElementsByTagName('div');
for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
for(var i = 0; i < aBtn.length; i++){
aBtn[i].className = ''; //限于默认样式是用标签给的 如果是class给的 这儿就该写默认class名字
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="box1">
<a href="javascript:;" class="active">按钮1</a>
<a href="javascript:;" >按钮2</a>
<a href="javascript:;" >按钮3</a>
<div style="display:block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>
选项卡:
1.按钮和内容的个数是对应[相等]的;
2.当前选中的按钮有选中状态;其他按钮没有状态
3.和当前选中的按钮对应的元素显示，其他的元素隐藏;
选项卡步骤;
1.先做按钮:
1>.先清空所有按钮的className;
for(var i = 0; i < aBtn.length; i++){
aBtn[i].className = '';
}
2>.当前点击的按钮加选中的状态[className];
this.className = 'active';
2.把按钮和div关联起来;
1>.隐藏所有的元素
for(var i = 0; i < aDiv.length; i++){
aDiv[i].style.display = 'none';
}
2>.和当前按钮对应的div显示;
aDiv[this.index].style.display = 'block';