javascript的选项卡

主要用的索引值

首先 写三个按钮

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

 

转载于:https://www.cnblogs.com/2520IT/p/5461442.html