JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<ul class="lista-sel">
    <li data-variavel="item-1">O dia das crianças</li>
    <li data-variavel="item-2">é também o dia dos animais</li>
    <li data-variavel="item-3">sempre que voce olha uma criança</li>
    <li data-variavel="item-4">há uma figura oculta</li>
    <li data-variavel="item-5">que é um cachorro atrás</li>
</ul>

CSS

.lista-sel {
    list-style: none;
    margin: 0; padding: 0;
}
    .lista-sel > li {
        padding: 8px 12px;
        background: rgba(0, 138, 255, 0.7);
        cursor: pointer;
        transition: 200ms ease-out;
    }
    .lista-sel > li.sel {
        background: rgba(225, 35, 35, 0.9);
        color: white;
    }

JavaScript

var lis = document.querySelectorAll(".lista-sel li");
for(var i = 0; i < lis.length; i++) {
	lis[i].addEventListener("click", function(e) {
    	this.className = "sel";
        var sibs = getSiblings(this);
        console.log(this);
        for(var j = 0; j < sibs.length; j++) {
			sibs[j].className = '';
        }
        
        alert("Yu selecioneited "+this.getAttribute("data-variavel"));
    });    
}

// CONTROL C from JQuery na cara dura :v 
function getChildren(n, skipMe){
    var r = [];
    for ( ; n; n = n.nextSibling ) 
       if ( n.nodeType == 1 && n != skipMe)
          r.push( n );        
    return r;
};

function getSiblings(n) {
    return getChildren(n.parentNode.firstChild, n);
}