本文主要是介绍js选项卡功能实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<style>
#box div{
width:200px;
height:200px;
background:#ccc;
display:none;
}
.on{
color:#fff;
background:green;
}
</style>
<div id="box">
<input type="button">新闻</input>
<input type="button">娱乐</input>
<input type="button">体育</input>
<div style="display:block">新闻</div>
<div>娱乐</div>
<div>体育</div>
</div>
<script>
//获取元素
var oBox = document.getElementById("box");
var aBtn = oBox.getElementsByTagName("input");
var aDiv = oBox.getElementsByTagName("div");
//aBtn是一组元素,所以需要用到for循环
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].οnclick=function(){
for(var k=0;k<aBtn.length;k++){//先清空所有的样式
aBtn[k].className ='';
aDiv[k].style.display ='none';
}
//给当前的按钮和div添加样式
this.className ='on';
aDiv[this.index].style.display ='block';
};
}
</script>
这篇关于js选项卡功能实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!