经典选项卡问题

最新推荐文章于 2024-01-24 12:19:34 发布

fuxiaomi2016

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量195

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fuxiaomi2016/article/details/53535386

版权

JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

input{

width: 65px;

height: 22px;

margin-left:-5px;

margin-bottom:1px ;

}
div{

width: 254px;

height: 160px;

border: 1px solid #999;

background-color:lightblue;

margin-left:-3px ;

display: none;

}
.active{

display:block;

}
.ac{

background-color:deeppink;

}

</style>
<script type="text/javascript">

window.οnlοad=function(){

var aBtn=document.getElementsByTagName("input");

var aDiv=document.getElementsByTagName("div");

for(var i=0;i<aBtn.length;i++){

aBtn[i].index=i;

aBtn[i].οnclick=function(){

for(var i=0;i<aBtn.length;i++){

aBtn[i].className="";

aDiv[i].style.display="none";

}

this.className="ac";

aDiv[this.index].style.display="block";

}

</script>
</head>
<body>

<input type="button" name="" id="jiaoyu" value="教育" class="ac" />
<input type="button" name="" id="chuguo" value="出国" />
<input type="button" name="" id="peixun" value="培训" />
<input type="button" name="" id="kaoshi" value="考试" />
<div class="active" >