addEventListener/querySelector/Toggle -需要帮助更改颜色，但取消选择其他选项卡
addEventListener/querySelector/Toggle -需要帮助更改颜色，但取消选择其他选项卡
提问于 2021-03-25 20:51:20
// Desktop View
const content1 = document.querySelector('#tab-1');
content1.addEventListener('click', (e) => {
document.querySelector('.dropdown-1').classList.toggle('hide');
document.querySelector('.dropdown-2').classList.remove('hide');
document.querySelector('.dropdown-3').classList.remove('hide');
document.querySelector('.fitguide').classList.toggle('darkBG');
document.querySelector('.fitguide a').classList.toggle('lightText');
});上面是我在这个部分遇到的问题的JavaScript。当我选择一个选项卡时，背景和文本颜色会按预期更改，但当我选择另一个选项卡时，先前选择的选项卡不会取消选择并更改回正常。我在这里谈论的是最后两行切换代码。我为他们准备的CSS：
.darkBG {
background: black;
}
.lightText {
color: white;
}我已经尝试了很多方法来解决这个问题，但我就是没有得到任何文本，只有背景变化。我想用JavaScript来做这件事，但如果需要的话，也可以在CSS中做。有没有人对这个问题有新的看法和经验？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-25 23:36:06
我们缺少HTML部分。然而，我们可以玩这个游戏。我想你会喜欢这样的东西。
const content1 = document.querySelector('#tab-1');
content1.addEventListener('click', (event) => {
let targetElement = event.target;
for (let element of content1.children) {
if (element === targetElement) {
element.classList.remove("deselected");
element.classList.add("selected");
continue;
}
element.classList.add("deselected")
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST STACKOVERFLOW</title>
<style>
.darkBG {
background: black;
}
.lightText {
color: white;
}
.dropdown-1{
border: 1px solid black;
}
.dropdown-2{
border: 1px solid black;
}
.dropdown-3{
border: 1px solid black;
}
.selected{
background-color: aquamarine;
}
.deselected{
background-color: black;
}
#tab-1 div{
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div id="tab-1">
<div id="1" class="dropdown-1"></div>
<div id="2" class="dropdown-2"></div>
<div id="3" class="dropdown-3"></div>
</div>
<script src="./stackoverflow.js"></script>
</body>
</html>
单击任何方块，您将注意到css将应用于您所单击的元素。请注意，在targetElement中单击的是元素。对于这种情况，有很多解决方案，但这只是一个开始
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66799882
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号