<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#999966; display:none; color:#000000;}
</style>
<script>
window.onload=function(){
var Div=document.getElementById('div1');
var aBtn=Div.getElementsByTagName('input');
var aDiv=Div.getElementsByTagName('div');
for(var i=0; i<aBtn.length; i++){
aBtn[i].index=i; // 记录
aBtn[i].onmouseover=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="div1">
<input class="active" type="button" value="选项1" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<div style="display:block;" >这是容11111111</div>
<div>这是是内容22222222</div
<div>这是是内容3333333</div>
</div>转载于:https://my.oschina.net/czyandy/blog/692300
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
