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:
Ver original
.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:
Ver original
.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:
Ver original
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?