Caros amigos, sou um estudante e curioso no assunto, não um programador experiente, daí minha pergunta.
Vamos lá, o método "ON()", do JQUERY, pode estar associado a diversos tipos de eventos ("click", "mouseleave", etc.), inclusive a mais de um ao mesmo tempo, certo?! Pois bem, por meio do método "ON" e de um evento "CLICK", tentei associar uma mudança no "SRC" da imagem (no "ALT" e no "TITLE", também). O que esperava que iria acontecer, que era, basicamente, mudar a imagem ao se clicar nela, acontece de modo insatisfatório, a imagem troca muito rapidamente e não permanece com a alteração, conforme se esperaria. Só ocorre no instante do click e volta ao que era depois de soltar o botão do mouse.
Seguem o HTML, as imagens e o JQUERY para análise. (Desde já, grato por sua ajuda!)
HTML
<a href=""> <!-- Espanha --> <img class="img-esp" src="img/esp.png" alt="España" title="España" /></a>
IMAGENS (Bandeiras)
JQUERY
$(document).ready(function() {
$(".img-esp").on("click", function() {
//Mudar a bandeirinha para a do Brasil (idioma português)
$(this).attr("src", "img/bra.png");
//Mudar o atributo ALT da bandeirinha (idioma português)
$(this).attr("alt", "Português (Brasil)");
//Mudar o atributo TITLE da bandeirinha (idioma português)
$(this).attr("title", "Português (Brasil)");
});
});
href
estar presente na taga
, para resolver, altere"click", function(e) { e.preventDefault(); ...
ou apenas adicione umreturn false;
ou simplesmente remova o atributo.