Buenas,
he estado probando una serie de elementos que al clickear sobre ellos hace que vaya apareciendo un ingrediente de una tarta al pulsar sobre cada uno. El problema que tengo es que no sé cómo hacer para que cuando vuelvo a clickear sobre uno de esos elementos vuelva a quitarle el borde de color activado que se ha puesto al clickear por primera vez (el que agrego de color verde con jquery).
También me gustaría saber cómo se podría hacer para que una vez elegidos, por ejemplo, tres ingredientes automáticamente me redirija a una url, estoy probando pero no logro arreglar estas dos cosas. Mi código es:
Código HTML:
<div class="item item-chocolate">
<a href="#" class="show-chocolate">
<img src="chocolate.png" alt="chocolate" />
<p>chocolate</p>
</a>
</div>
<div class="item item-cerezas">
<a href="#" class="show-cerezas">
<img src="cerezas.png" alt="cerezas" />
<p>cerezas</p>
</a>
</div>
<div class="item item-caramelos">
<a href="#" class="show-caramelos">
<img src="caramelos.png" alt="caramelos" />
<p>caramelos</p>
</a>
</div>
<div class="item item-merengue">
<a href="#" class="show-merengue">
<img src="merengue.png" alt="merengue" />
<p>merengue</p>
</a>
</div>
<div class="item item-figura">
<a href="#"figura.png" alt="figura" />
<p>figura</p>
</a>
</div>
<div class="item item-lazo">
<a href="#" class="show-lazo">
<img src="lazo.png" alt="lazo" />
<p>lazo</p>
</a>
</div> jquery
Código:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.show-chocolate').on('click',function(){
$('.bacon').toggle('slow');
$('.item-chocolate img').css("border", "6px solid green");
});
$('.show-cereza').on('click',function(){
$('.cereza').toggle('slow');
$('.item-cereza img').css("border", "6px solid green");
});
$('.show-caramelos').on('click',function(){
$('.caramelosi').toggle('slow');
$('.item-caramelos img').css("border", "6px solid green");
});
$('.show-merengue').on('click',function(){
$('.merengue').toggle('slow');
$('.item-merengue img').css("border", "6px solid green");
});
$('.show-figura').on('click',function(){
$('.figura').toggle('slow');
$('.item-figura img').css("border", "6px solid green");
});
$('.show-lazos').on('click',function(){
$('.lazos').toggle('slow');
$('.item-lazos img').css("border", "6px solid green");
});
});
</script>
Saludos!!!!