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

最新推荐文章于 2022-07-20 10:58:06 发布

u012600104

最新推荐文章于 2022-07-20 10:58:06 发布

阅读量1k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/u012600104/article/details/79008232

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>