javaScript—tab切换

最新推荐文章于 2023-06-04 22:01:17 发布

飞腾创客

最新推荐文章于 2023-06-04 22:01:17 发布

阅读量589

点赞数

分类专栏： javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_39716220/article/details/77685039

版权

javascript基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btn{
color: red;
font-size: 20px;
background-color: yellow;
display: inline-block;
width: 45px;
text-align: center;

}
.show_div{
width: 200px;
height: 200px;
background-color: cyan;
color: red;
font-size: 30px;
text-align: center;
}
.hidden_div{
display: none;
}
</style>
</head>
<body>
<div>
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
</div>

<div class="show_div">第一块</div>

<div class="show_div hidden_div">第二块</div>
<div class="show_div hidden_div">第三块</div>
<div class="show_div hidden_div">第四块</div>
</body>
</body>
<script type="text/javascript">
var btn=document.getElementsByClassName('btn');
var showDiv=document.getElementsByClassName('show_div');
// btn[0].οnclick=function(){
// btn[0].style.backgroundColor="gray";
// btn[1].style.backgroundColor="yellow";
// showDiv[0].style.display="block";
// showDiv[1].style.display="none";
// }
// btn[1].οnclick=function(){
// btn[1].style.backgroundColor="gray";
// btn[0].style.backgroundColor="yellow";
// showDiv[0].style.display="block";
// showDiv[1].style.display="none";
// }
for(var i=0;i<btn.length;i++){

//btn[i].index=i;//自定义属性
(function(a){ // 匿名函数 a是局部变量
// 按钮的变化
btn[i].οnclick=function(){
//让所有btn初始化为黄色
for(var j=0;j<btn.length;j++){
btn[j].style.backgroundColor="yellow";
showDiv[j].style.display="none";

}
//this指向的是触发事件的元素
this.style.backgroundColor="gray";
showDiv[a].style.display="block";
//showDiv[this.index].style.display="block";
}
})(i);

}

</script>

</html>