JSFiddle - React, Tailwind, and code Playground

HTML

<div id="galeria">
<ul id="imgLista">
<li><a href="images\1_castillo.jpg" title="Esta es la primera imagen">1</a></li>
<li><a href="images\2_castillo.jpg" title="Esta es la segunda imagen">2</a></li>
<li><a href="images\3_castillo.jpg" title="Esta es la tercera imagen">3</a></li>
</ul>
</div>

CSS

.active{background:tomato}

JavaScript

function showPic(event, index){

    alert(index);
        
    links(function(){
        this.classList.remove("active")
    });
    
    this.classList.add("active");
    event.preventDefault();
}

function links(callback){
    var contenedor = document.getElementById("galeria")
    , lista = contenedor.getElementsByTagName("a");
    for(var i=0; i<lista.length; i++) {
        callback.call(lista[i], i);
    }
    return lista;
}

document.addEventListener("DOMContentLoaded", function(event) { 
    links(function(i){
        this.onclick = function(event){
            showPic.call(this, event, i);
        }
    });
});