Quiero aprender como cambiar dinamicamente un elemento. Ej: Galería de productos.

[g3kdigital]

Hola!

De 1ras aclaro que no se programar, solo manejo muchas cosas de css y html, pero aunque tengo algo claros cuales son los principios de la programación, en la práctica soy un cojo.

Este es un demo que propuse hacer:

http://codepen.io/g3kdigital/pen/jqXdBM?editors=1100

Se trata de una galería de productos dividida en pestañas, diseñe la interfaz con el fin de poder explorar cada uno de los productos y poder ver más imágenes y descripción de este, sin tener que hacer scroll.

Quise hacerlo usando el metodo de checked en css.

Si un input esta checkeado entonces el compañero más cercano reaccionara, ejemplo:

Código CSS:

.activboard:checked ~ .menu-products .trigger.activboard
{  background-image: url('http://www.eduholdingcolombia.com/images/icono-promethean-01-activwall.png'); }
 

Que es lo mismo que decir, que si se checkea el input, entonces la pestaña de productos, activeboard, cambia de imagen de fondo.

El problema es que no es dinamico, y por cada una de las pestañas o inputs, me toca crear este selector:

Código CSS:

.activboard:checked ~ .box .img01:checked ~ .previews .foto
{
  background-image: url('http://www.eduholdingcolombia.com/images/activeboard-foto-movil.png');
}
 
.activboard:checked ~ .box .img02:checked ~ .previews .foto
{
  background-image: url('http://www.eduholdingcolombia.com/images/activboard-frente-movil.png');  
}
 
 
.activboard:checked ~ .box .img03:checked ~ .previews .foto
{
  background-image: url('http://www.eduholdingcolombia.com/images/activboard-lado-movil.png');  
}
 

Por lo que sé que en Jquery, se puede lograr lo mismo, sin menos compliques y dañando la estructura html con unas etiquetas que sobran, ejemplo:

Código Javascript:

trigger01.click(function(event) {
    target01a.addClass("cambio-color1");
    target02b.addClass("cambio-color2");
    target03c.addClass("cambio-color3");
  });  
 
trigger02.click(function(event) {
    target01a.addClass("cambio-color1");
    target02b.addClass("cambio-color2");
    target03c.addClass("cambio-color3");
  });
 

Pero, creo que se puede mejorar aún más, sobre todo porque creo que debo usar un condicional

Pero no se como... me podrían ayudar?