<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#div1 .active{background: yellow;}
#div1 div{width:200px; height: 200px; background: #CCC; border: 1px solid #66ff00;display: none;}
</style>
<script>
window.onload = function()
{
var oDiv=document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.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="div1">
<input type="button" class="active" value="教育"/>
<input type="button" value="招生"/>
<input type="button" value="培训"/>
<input type="button" value="人文"/>
<div style="display: block" >11111</div>
<div>22222</div>
<div>33333</div>
<div>4444</div>
</div>
</body>
</html>
js选项卡简单切换
最新推荐文章于 2023-04-11 23:23:07 发布