如何解决addEventListener/querySelector/Toggle - 需要帮助更改颜色但取消选择其他选项卡
// 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 中做。有没有人有新鲜的眼光,有这个问题的经验?
解决方法
我们缺少 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 中的单击元素。这种情况有很多解决方案,但这是一个开始
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。