Active não ficando selecionado ao click

Front-end HTML
, ,
#1

Bom dia,

eu sei que deve ser uma coisa basica, mas estou tendo problemas com isso.

O site contem dois idiomas, ao clicar em uma bandeira, a linguagem do site muda e a bandeira referente a linguagem fica com cores, em quanto a outra bandeira fica em Preto e Branco, porem, quando eu clico em uma bandeira, ela fica selecionada e atualiza a pagina automaticamente, voltando para a outra bandeira. Alguem poderia me ajudar?

HTML

  <div class="languages">
               <a href="<?=URL_SITE?>/idiomas/changeLanguage/portugues">
                   <img id="br" class="active" src="<?=ICONES?>br-flag.png">
                </a>

                <a href="<?=URL_SITE?>/idiomas/changeLanguage/espanhol">
                    <img id="es" src="<?=ICONES?>es-flag.png">
                </a>
            </div>

SCRIPT

 <script type="text/javascript">
        $(document).ready(function() {
            $('img').click(function() {
              $('img.active').removeClass("active");
              $(this).addClass("active"); 
            });
        });
</script>

CSS

.languages img{
         margin-left: 3px;
         filter: grayscale(1);
         -webkit-filter: grayscale(1);
      }

.languages img:hover, .languages img.active{
         filter: grayscale(0);
         -webkit-filter: grayscale(0);
      }
#2

@WillianTartaro

Ali no seu jQuery faz assim:

    $(document).ready(function() {
        $('img').click(function(e) {
           e.preventDefault(); // Vai evitar o refresh da página.
          $('img.active').removeClass("active");
          $(this).addClass("active"); 
        });
    });

Abraço.

1 curtida
#3

Ah legal legal, nao sabia dessa função.
Porem, agora que ele nao esta dando refresh na pagina, as bandeiras mudam, mas a pagina nao sofre a transformação de linguagem :frowning:

#4

@WillianTartaro

De forma mais bruta seria você fazer uma verificação com o PHP recuperando de uma sessão, por exemplo.

Quando o cara clicar na bandeira brasileira tu pega a sessão flag e coloca como 1 e se for espanhola coloca como 2:

$_SESSION[‘flag’] = 1; // Brasil
$_SESSION[‘flag’] = 2; // Espanha

Daí tu vai conseguir identificar em qual idioma está a página e setar a bandeira que deve ficar marcada usando um if ali.

Porque sempre que for clicado no link e a página atualizar vai voltar para a formatação padrão, tu vai ter que arrumar um jeito de identificar o idioma para marcar a bandeira, com PHP tem essa forma que falei ou usando cookie também.

Abraço.