JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<div id="section5" class="section section5">
	<ul>
    Contenido
    <!--MENU-->    
	<li><a href="#" onclick="changeid(5,'')">- Azul</a></li>
	<li><a href="#" onclick="changeid(5,'a')">- Rojo</a></li>
	<li><a href="#" onclick="changeid(5,'b')">- Verde</a></li>
	<li><a href="#" onclick="changeid(5,'c')">- Amarillo</a></li>
	<li><a href="#" onclick="changeid(5,'d')">- Morado</a></li>
	</ul>
</div>

<div id="section6" class="section section6">
	<ul>
    FuckThe System
    <!--MENU-->    
	<li><a href="#" onclick="changeid(6,'')">- Azul</a></li>
	<li><a href="#" onclick="changeid(6,'a')">- Rojo</a></li>
	<li><a href="#" onclick="changeid(6,'b')">- Verde</a></li>
	<li><a href="#" onclick="changeid(6,'c')">- Amarillo</a></li>
	<li><a href="#" onclick="changeid(6,'d')">- Morado</a></li>
	</ul>
</div>

CSS

.section {
    font-size: 14px;
    font-family: 'arial'
}
.section5,
.section6{
    background-color:#09C;
}
.section5a,
.section6a{
    background-color:#F00;
}

.section5b,
.section6b{
    background-color:#0F0;
}

.section5c,
.section6c{
    background-color:#FF0;
}

.section5d,
.section6d{
    background-color:#63F;
}

a:link, a:visited, a:hover {color:#FFFFFF;}

JavaScript

function changeid(id, clave){
    var nuevaClase = "section" + id + clave;
    var e = document.getElementById("section" + id);
    /* Checa aqui que la clase que comparten 'section' se tiene que poner también */
    e.className = 'section ' + nuevaClase;
    console.log("section"+ id + clave);
}