JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><a href="#1">Conteudo1</a></li>
<li><a href="#2">Conteudo2</a></li>
<li><a href="#3">Conteudo3</a></li>
</ul>
<div class="teste" id="1">
<p>Teste 1</p>
</div>
<div class="teste" id="2">
<p>Teste 2</p>
</div>
<div class="teste" id="3">
<p>Teste 3</p>
</div>
CSS
.teste {
display: none;
}
JavaScript
function toggle(els, index) {
return function(e) {
e.preventDefault();
for (var i = 0; i < els.length; i++) {
els[i].style.display = i == index ? 'block' : 'none';
}
}
}
var lis = document.querySelectorAll('ul li a');
var testes = document.querySelectorAll('.teste');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', toggle(testes, i));
}