您的位置：首页 > Web前端 > JavaScript

javascript 选项卡,循环获取并改变元素值

2018-01-08 23:06 411 查看

aBtn=oDiv.getElementsByTagName(“input”);

这个的意思是获取id=“div1”；下面所以的input标签然后付给变量aBtn

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
#div1 .active{background:yellow;}
#div1 div{width:200px;height:200px;background:#ccc;border:1px solid #999;display:none;}
</style>
<script>
window.onload=function(){

//获取最外层的div id
var oDiv=document.getElementById("div1");
//通过外层的div id 获取所有的input 标签
var aBtn=oDiv.getElementsByTagName("input");   // getElementsByTagName 就是获取标签的意思
var aDiv=oDiv.getElementsByTagName("div");

for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;                        //给input 标签，添加新的index标签并循环赋值
aBtn[i].onclick=function (){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';           //循环清空所有input标签的class
aDiv[i].style.display='none';   //循环隐藏所有的div
}
this.className='active';        //给当前的input标签添加 active 类样式
aDiv[this.index].style.display='block';    //当前第 index 标签 的div显示
}
}

}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="111">
<input type="button" value="222">
<input type="button" value="333">
<input type="button" value="444">
<div style="display:block;">111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>

</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航