Estoy creando un sitio web y tengo 3 imágenes con un radio de borde del 50 % (en un círculo) y todas tienen un borde blanco. Pero necesito cuando hago clic en, por ejemplo, el primero, toma un borde verde. y luego, si hago clic en la segunda imagen, la primera deselecciona el borde verde y obtiene su borde predeterminado y la segunda ahora obtiene el borde verde...
img { border-radius: 50%; border-color: white; } <img src="."> <img src="."> <img src=".">Envuelva las imágenes en un elemento contenedor y adjunte un oyente para que pueda usar la delegación de eventos para capturar los eventos de clic de las imágenes a medida que "burbujean" el DOM (en lugar de agregar oyentes a todas las imágenes), y use una clase .
Cuando se hace clic en una imagen, elimine la clase "verde" de todas las imágenes y agréguela a la imagen en la que se hizo clic.
const container = document.querySelector('#container'); const images = container.querySelectorAll('img'); container.addEventListener('click', handleClick, false); function handleClick(e) { if (e.target.nodeName === 'IMG') { images.forEach(image => image.classList.remove('green')); e.target.classList.add('green'); } } img { border: 5px solid white; } .green { border: 5px solid green; } <div id="container"> <img src="https://dummyimage.com/100x100/000/fff" /> <img src="https://dummyimage.com/100x100/555/fff" /> <img src="https://dummyimage.com/100x100/aaa/fff" /> </div>Una solución solo de CSS sería usar casillas de verificación. Luego cambie el estilo de la casilla de verificación seleccionada con: input:checked + label img { border: syntax green; }
img { border-radius: 50%; border: 5px solid white; } input { display: none; } input:checked + label img { border: 5px solid green; } /* for styling purpose only */ body { background-color: grey; } <input type="radio" id="image-1" name="image" value="huey"> <label for="image-1"> <img src="https://via.placeholder.com/100.jpg"> </label> <input type="radio" id="image-2" name="image" value="huey"> <label for="image-2"> <img src="https://via.placeholder.com/100.jpg"> </label> <input type="radio" id="image-3" name="image" value="huey"> <label for="image-3"> <img src="https://via.placeholder.com/100.jpg"> </label>