如何使用 javascript 添加元素 class？
[英]How can I add an element class with javascript?
问题描述
I need your help: this is some kind of photo gallery.) I want to add this.active class on panels when I click on it?
我需要你的帮助：这是某种照片库。）当我单击它时，我想在面板上添加 this.active class？ Can anyone teach me how to do that with traditional functions: It only works on just one element :(谁能教我如何使用传统功能做到这一点：它只适用于一个元素:(
var panels = document.querySelectorAll(".panel"); console.log(panels); for (var i = 0; i < panels.length; i++) { panels[i].addEventListener("click", function() { var panelClassName = this.className; addClass(panelClassName); }); } function addClass(currentPanel) { var activePanel = document.querySelector("." + currentPanel); activePanel.classList.add("active"); }
<div class="container"> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_1280.jpg)"> <h3>Explore the world</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg)"> <h3>Elephant</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg)"> <h3>Lake</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg)"> <h3>Jungle</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg)"> <h3>Forest</h3> </div> </div>
1 个解决方案
解决方案1
0 已采纳 2021-04-10 23:11:26
The main approach is to have a function to remove active class to all active panels before add this class into click event target.主要方法是在将此 class 添加到点击事件目标之前，使用 function 将active class 删除到所有活动面板。 You can check the code here:您可以在此处查看代码：
https://jsfiddle.net/p8sr453o/6/ https://jsfiddle.net/p8sr453o/6/
function removeActiveClass() { const div = document.querySelector('.panel.active'); div && div.classList.remove('active'); } function addActiveClass(target) { target.classList.add("active"); } function addClass(event) { removeActiveClass(); addActiveClass(event.currentTarget); } var panels = document.querySelectorAll(".panel"); console.log(panels); for (var panel of panels) { panel.addEventListener("click", addClass); }
.panel { color: lightblue; }.panel.active { color: red; }
<div class="container"> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_1280.jpg)"> <h3>Explore the world</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg)"> <h3>Elephant</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg)"> <h3>Lake</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg)"> <h3>Jungle</h3> </div> <div class="panel" style="background-image: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg)"> <h3>Forest</h3> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将 class 添加到 JavaScript 中的 DOM 元素？ - How can I add a class to a DOM element in JavaScript?
如何在纯 JavaScript 中向元素添加和删除活动类 - How can I add and remove an active class to an element in pure JavaScript
如何使用 JavaScript 添加类的元素 - How I can add element's of class using JavaScript
如何通过 javascript 元素的 class 添加所有值？ - How can I add all the values by the class of the element with javascript?
如何通过 javascript 将引导程序 class 添加到“按钮”元素？ - How can I add a Bootstrap class to a 'Button' element through javascript?
如何使用javascript将类添加为元素的字符串？ - how can i add class to an element as string with javascript?
如何将悬停类添加到元素？ - How can I add a hover class to an element?
如何将 fontawesome 添加到 javascript 元素？ - how can i add fontawesome to javascript element?
如何使用JavaScript在我的锚元素上添加样式类名称 - How can I add a style class name onto my anchor element using JavaScript
如何使用javascript将类添加到子元素？ - How do I add a class to a child element with javascript?
相关标签