js 的小效果---->选项卡

js选项卡

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#box1 {     width: 300px;

　　　　height: 300px;

　　　 margin: 100px auto;

　　　border: #000 2px solid;

　　 　　font-family: "微软雅黑";

}

#box1 a{

　　display: block;

　　float: left;

　　width: 100px;

　　 height: 40px;

　　 line-height: 40px;

　　text-align: center;

　　background: green;

　　color: #fff;

　　text-decoration:none;

}
#box1 div {

width: 300px;

height: 260px;

line-height:260px;

text-align: center;

font-size:40px;

display: none;

}
#box1 a.active {

background: blue;

}

</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 = '';

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';

------->此文转发