用原生js写个class切换

使用原生JavaScript实现元素class切换

最新推荐文章于 2025-06-29 19:27:32 发布

原创最新推荐文章于 2025-06-29 19:27:32 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

3 篇文章

订阅专栏

这篇博客演示了如何使用原生JavaScript为HTML元素添加点击事件，实现点击后切换class的效果。通过获取ID为'toggle'的div内的所有子div，并为每个子元素添加点击事件监听器，当点击某元素时，移除所有兄弟元素的'blue'类，将被点击元素的类设置为'blue'，从而改变背景颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="yes" name="apple-touch-fullscreen">
<title></title>
<style>
*{margin:0;padding:0;}
#toggle{
width:100%;
height:100px;
display:flex;
display:-webkit-flex;
box-sizing: border-box;
}
#toggle div{
width:33.333%;
height:100%;
flex:1;
border:1px solid #eaeaea;
box-sizing: border-box;
}

.blue{
background-color:blue;
}
</style>
</head>
<body>
<div id="toggle">
<div class="blue" id="id1">NO.1</div>
<div id="id2">NO.2</div>
<div id="id3">NO.3</div>
</div>
<script>
var toggleDiv = document.querySelectorAll("#toggle div");
for(var i=0; i<toggleDiv.length;i++){
toggleDiv[i].index=i;
toggleDiv[i].onclick =function(){
for(var j = 0 ;j<toggleDiv.length;j++){
toggleDiv[j].className = "";

}
toggleDiv[this.index].className = "blue";

}
}

</script>
</body>
</html>