Active not being selected when clicking

Asked

Viewed 24 times

0

Good morning,

I know it must be a basic thing, but I’m having trouble with it.

The site contains two languages, when clicking on a flag, the language of the site changes and the flag of the language is with colors, when the other flag is in Black and White, however, when I click on a flag, it is selected and updates the page automatically, Back to the other flag. Someone could help me?

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);
      }
javascript html css

  • What is the language you have on the server (I imagine PHP?)? The logic that is missing here can be done on the server. If you join to the link of each image a query string with for example ?lang=br on the server you can fetch this as a GET and render the classes or url of each png file depending on this.

1 answer

0

Since you redirect to another page/url you don’t need to have the logic in the client and you can do it all in PHP. Even what you have now in jQuery you can do on the server.

It would be something like that:

<?php
    $lang = $_GET['lang'];    
?>
<div class="languages">
    <a href="<?=URL_SITE?>/idiomas/changeLanguage/portugues?lang=br">
        <img id="br" class="<?= $lang == 'br' ? 'active' : ''?>" src="<?=ICONES?>br-flag.png" />
    </a>

    <a href="<?=URL_SITE?>/idiomas/changeLanguage/espanhol?lang=es">
        <img id="es" class="<?= $lang == 'es' ? 'active' : ''?>" src="<?=ICONES?>es-flag.png" />
    </a>
</div>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.