码迷,mamicode.com
首页 > 编程语言 > 详细

javascript的选项卡

时间:2016-05-05 14:15:35      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

主要用的索引值

首先 写三个按钮

<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‘;
}
}
}

 

javascript的选项卡

标签:

原文地址:http://www.cnblogs.com/2520IT/p/5461442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!