如何onclick使用JavaScript 更改HTML元素的类以响应事件？
我在一个页面中有9个图像,并且布局看起来像9个图像的网格.当我点击图像时,我有一个想要用作每个图像边框的图像.这是一个带边框的透明图像,就像确认图像的选择一样.
我怎样才能实现这一点？当我点击图像时,当我点击图像边框图像应该消失时,边框图像会反复出现.
有没有办法只使用HTML和CSS来实现它
.image1 {
left: 786 px;
top: 629 px;
position: absolute;
width: 441 px;
height: 243 px;
float: left;
}
.image2 {
left: 1284 px;
top: 629 px;
position: absolute;
width: 441 px;
height: 243 px;
float: left;
}
.image3 {
left: 289 px;
top: 920 px;
position: absolute;
width: 441 px;
height: 243 px;
float: left;
}
<html>
<body>
<div class="image1">
<img src="images/image1.png" />
</div>
<div class="image2">
<img src="images/image2.png" />
</div>
<div class="image3">
<img src="images/image3.png" />
</div> …我试图制作一个导航菜单我做了所有的HTML和CSS时来到javascript我在中间被击中我能够添加一个类的元素,但我无法删除类剩余的元素.请帮我解决一下这个.
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Navigation class Toggling</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: darkgray;
color: #fff;
}
a.active {
background-color: cornflowerblue;
}
</style>
</head> …大多数所出现的，我写这一个是像类似的问题本（用户希望使用纯JS来切换元素的类）或本（用户希望愿望切换使用jQuery等属性）
我的问题是两者的混合。I am aware that the el.classList.toggle()method exists for toggling an element's class using pure JS, but I wish to toggle different attributes using pure JS, specifically the checkedattribute of some radio buttons, since this (annoyingly) does not change when different options are selected.
是否可以checked使用纯 JS 切换我的两个单选按钮上的属性（通过切换，我的意思是如果存在则从元素中完全删除该属性，如果不存在则添加它）？
radios = document.getElementsByName("Floor");
for (i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function () {
this.(/*checked attribute*/).toggle()
}, false);
}<input checked id="Floor" name="Floor" …我见过类似的问题，例如“如何在纯 JavaScript 中切换元素的类？ ”，但这个问题指的是属性。
我有一个像这样的复选框：
<span class="newsletter-checkbox">
<input type="checkbox" name="newsletter" id="newsletter" checked> Sign up to the newsletter as well - recieve new posts in your inbox
</span>如何做到这样，当.newsletter-checkbox单击其中的任何位置（包括文本）时，它会切换复选框checked属性？
我正在尝试为<li>click事件添加元素类。如果单击第一个元素，它将获得类“ current-tab”，而其他<li>元素不应包含该类，等等。这是一些HTML代码：
<nav class="interest-nav">
<ul id="interest-ul">
<li><a href="#box1">Fashion</a></li>
<li><a href="#box2">Movies</a></li>
<li><a href="#box3">TV</a></li>
</ul>
</nav>
和Javascript代码：
var navUl = document.getElementById('interest-ul').getElementsByTagName('li');
for (var y = 0; y < navUl.length; y++) {
navUl[y].addEventListener('click', checkLi);
}
function checkLi() {
if (navUl.className === '') {
navUl.className = 'current-tab';
} else {
navUl.className = '';
}
}
感谢您的关注和帮助！
我构建了一个应用程序，当我单击指定的元素时会添加一个类。我想向我的应用程序添加附加功能。当我点击一个项目时，我想添加我的课程clicked（现在该应用程序以相同的方式工作），但是当我点击另一个项目时，我想在最后一个项目上添加课程并从第一个项目中删除课程物品。
document.addEventListener("DOMContentLoaded", () => {
const list = document.querySelectorAll('.item');
for (let i = 0; i < list.length; i++) {
list[i].addEventListener('click', function (e) {
const curentItem = e.target;
if (curentItem) {
curentItem.classList.add('clicked');
console.log(curentItem)
}
})
}
});
const arr = [1, 2, 3, 4]
const mapping = arr.map(item => `<li class="item">${item}</li>`);
document.querySelector('.items').innerHTML = mapping.join(' ');.clicked {
background-color: blue;
}<div class="app">
<ul class="items">
</ul>
</div>如何更改我的代码以获得指定的结果？