Tengo dos ul con la misma clase, el concepto que traté de lograr es que al hacer clic en el li activo debería haber un cambio de color en el borde. He tenido éxito en eso, el concepto que necesito es que quiero tener el mismo color de borde predeterminado presente en el primer ul li, y si hago clic en otro, debería eliminarse y el color debería aplicarse en el que se hizo clic. El código que he probado hasta ahora.
¡Cualquier ayuda será apreciada!
var x = document.querySelectorAll('.random-value li'); for (var i = 0; i < x.length; i++) { x[i].addEventListener("click", function() { var selectedEl = document.querySelector(".selected"); if (selectedEl) { selectedEl.classList.remove("selected"); } this.classList.add("selected"); }, false); }; .random-value li{ margin: 0 0 15px 0; border: 1px solid green; padding: 15px 26px; } .random-value .selected{ border: 1px solid red; } <ul id="first" class="random-value"> <li>200 </li> <li>2010 </li> <li>2100 </li> <li>2030 </li> </ul>Creo que esto es lo que estás buscando,
//Making first option as Highlighted document.querySelectorAll('.random-value li')[0].classList.add("selected"); var x = document.querySelectorAll('.random-value li'); for (var i = 0; i < x.length; i++) { x[i].addEventListener("click", function() { var selectedEl = document.querySelector(".selected"); if (selectedEl) { selectedEl.classList.remove("selected"); } this.classList.add("selected"); }, false); }; .random-value li{ margin: 0 0 15px 0; border: 1px solid green; padding: 15px 26px; } .random-value .selected{ border: 1px solid red; } <ul id="first" class="random-value"> <li>200 </li> <li>2010 </li> <li>2100 </li> <li>2030 </li> </ul>