JSFiddle - React, Tailwind, and code Playground

by je34429

HTML

<div class="contenedor">

  <div class="botonera">
        <div class="boton" id="boton1">boton1</div>
        <div class="boton" id="boton2">boton2</div>
        <div class="boton" id="boton3">boton3</div>
        <div class="boton" id="boton4">willy</div>
        
    </div>

    <div class="contenedorTextos">
        <div class="caja" id="caja1">contenido1</div>
        <div class="caja" id="caja2">contenido2</div>
        <div class="caja" id="caja3">contenido3</div>
        <div class="caja" id="caja4">hola will este tema funciona</div>
    </div>

</div>

CSS

.contenedor{ background:#ddd; width:800px; height:650px; margin:0px auto; position:relative;}
.botonera{position:absolute; left:25px; top:50px; width:280px; }
.contenedorTextos{position:absolute; right:0px; top:50px; width:480px; height:550px; background:#3FF;}
.boton{background:#9C0; border-radius:10px; padding:7px 25px; text-align:center; margin:10px 0px;}
.boton:hover{background:#0C0; cursor:pointer;}
.caja{width:480px; height:550px; position:absolute; top:0px; left:0px; background:#0CF; opacity:0;}

JavaScript

$( document ).ready(function() {
/*inicializa documento*/


var botones = $('.boton');
var caja =$('.caja');
var animar = function(objeto){
var opacidad = objeto.css('opacity');
opacidad = parseInt(opacidad);
	if(opacidad<1){objeto.stop().animate({'opacity':1});}else{objeto.stop().animate({'opacity':0});}
	};


$('.boton').click(function(event){

var identificador = event.target.id;

var cajaEquivalente;
var comparador;

for(i=0; i<botones.length; i++){
cajaEquivalente = caja.eq(i);
comparador = botones[i].attributes[0].nodeValue;
	
if(comparador == identificador){
	 
	 animar(cajaEquivalente);
	 cajaEquivalente.addClass("activo");
	 
	 
	 
}else{
	cajaEquivalente.removeClass("activo");
	cajaEquivalente.stop().animate({'opacity':0});
	
	
	}
	
}


});
/*finaliza iniciador*/
});