JavaScript帮助-单击事件侦听器以激活1个元素节点并禁用其他节点
JavaScript帮助-单击事件侦听器以激活1个元素节点并禁用其他节点
提问于 2021-02-05 07:09:38
我卡住了。我是JavaScript的初学者，下面是我想做的事情。
我正在给我的"click" eventListener添加一个.tab-container。当我单击.tab元素时，它将执行event.target.matches(".tab")。
如果匹配，它将遍历.tab元素的.tab并将它们与event.target进行比较。
等于event.target的元素将更新其className，使其成为active class="tab active"。任何其他选项卡都有className of class="tab"，因此它不活动。
JS
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
tabContainer.addEventListener("click", function (event) {
if (event.target.matches(".tab")) {
for (var i = 0; i < tabElements.length; i++) {
if (tabElements[i] === event.target) {
event.target.className = "tab active";
} else if (tabElements[i] !== event.target) {
event.target.className = "tab";
}
}
}
});<div class="tab-container">
<div class="tab active" data-view="html">HTML</div>
<div class="tab" data-view="css">CSS</div>
<div class="tab" data-view="javascript">JavaScript</div>
</div>回答 2
Stack Overflow用户
发布于 2021-02-05 07:34:58
试试这段代码，它应该能工作：
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
tabContainer.addEventListener("click", function (event) {
if (event.target.classList.contains("tab")) {
for (i of tabElements) {
i.className = 'tab';
if (i === event.target) {
event.target.classList.add('active');
console.log(i.innerHTML + ' is active');
}
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="tab-container">
<div class="tab active" data-view="html">HTML</div>
<div class="tab" data-view="css">CSS</div>
<div class="tab" data-view="javascript">JavaScript</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2021-02-05 07:35:51
您不应该设置Event.Target的className (特别是在其他情况下)
试一试
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
tabContainer.addEventListener("click", function (event) {
if (event.target.matches(".tab")) {
for (var i = 0; i < tabElements.length; i++) {
if (tabElements[i] === event.target) {
tabElements[i].className = "tab active";
} else {
tabElements[i].className = "tab";
}
}
}
});注意它的tabElements[i]而不是event.target。我也删除了多余的，如果条件，如克里斯G提到。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66059038
复制相关文章
相似问题
腾讯云开发者
