JSFiddle - React, Tailwind, and code Playground
HTML
<li id="nombre-1">
<div class="miClase">
Titular 1
<input type="button" value="Mostrar" onclick="$('.claseA').parent().show('normal')" />
<input type="button" value="Ocultar" onclick="$('.claseA').parent().hide('normal')" />
</div>
</li>
<li id="nombre-2"><div class="otraClase">Texto</div></li>
<li id="nombre-3"><div class="otraClase">Texto</div></li>
<li id="nombre-4"><div class="otraClase">Texto</div></li>
<li id="nombre-5"><div class="otraClase">Texto</div></li>
<li id="nombre-6"><div class="otraClase">Texto</div></li>
<li id="nombre-id">
<div class="miClase">
Titular 2
<input type="button" value="Mostrar" onclick="$('.claseB').parent().show('normal')" />
<input type="button" value="Ocultar" onclick="$('.claseB').parent().hide('normal')" />
</div>
</li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id">
<div class="miClase">
Titular 3
<input type="button" value="Mostrar" onclick="$('.claseC').parent().show('normal')" />
<input type="button" value="Ocultar" onclick="$('.claseC').parent().hide('normal')" />
</div>
</li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
<li id="nombre-id"><div class="otraClase">Texto</div></li>
CSS
.miClase { background: #000; color: #fff; }
.claseA { background: #cdcdcd; }
.claseB { background: #FF0000; }
.claseC { background: #eeeeee; }
JavaScript
$(function() {
var cont = 64;
var class_to_assign = "";
var cont_changed = false;
$("li").each(function() {
if($(this).find("div").hasClass("miClase")) {
cont += 1;
cont_changed = !cont_changed;
} else {
if(cont_changed) {
class_to_assign = "clase" + String.fromCharCode(cont);
cont_changed = !cont_changed;
}
$(this).find("div").addClass(class_to_assign);
$('[class*="clase"]').hide(); // ocultamos pestañas
$('.claseA').show(); // mostramos primera pestaña
}
});
});