标签:
主要用的索引值
首先 写三个按钮
<input type="button" > <input type="button" > <input type="button" >
设置input按钮的样式
input{ border:0; padding:3px 5px; background:blue; color:#fff; margin-left:5px;}
下面写切换的内容的html代码和css样式
<div id="div1">
<div style="display:block">第一个切换</div> <div>第二个切换</div> <div>第三个切换</div>
</div>
#div1 div{width:300px; height:200px; border:3px solid #000;display:none; padding:10px;}
.active{ background-color:red;}
开始写js代码
1 windows.onload = function(){
var oDiv = document.getElementById(‘div1‘) 2 var aInput = oDiv.getElementsByTagName(‘input‘); 3 var aDiv = oDiv.getElementsByTagName(‘div‘); 4 for(var i=0; i< aInput.length ; i++){
aInput[i].index = i;
aInput[i].oncilck = function(){
for( var i=0; i<aInput.length; i++){
this.className = ‘‘;
aDiv[this.index].style.display = ‘none‘;
}
this.className = ‘active‘;
aDiv[this.index].style.display = ‘block‘;
}
}
}
标签:
原文地址:http://www.cnblogs.com/2520IT/p/5461442.html