Partage

Fonction Toggle background-color au clique HELP

HTML JS TOGGLE

Sujet résolu

20 février 2018 à 17:58:17

Hello,

Je souhaiterai faire en sorte qu'au clique le texte de mes balises <p> de la div icone change de couleur. Sur cette partie tout fonctionnement bien.

Mais si je clique successivement sur Test 1 puis Test2, le background de Test1 reste actif. Comment faire pour que le background-color apparaissent que si le lien est activé ? Merci

Voici ci-dessous le code:

<div class="icone">

<p href="#" id="toggler1" class="toggler" data-id="toggle1" data-couleur="red">Test1</p>

<p href="#" id="toggler2" class="toggler" data-id="toggle2" data-couleur="green">Test2</p>

<p href="#" id="toggler3" class="toggler" data-id="toggle3" data-couleur="blue">Test3</p>

</div>

<div class="zone-texte">

<ul>

<li id="toggle1" class="toggle"><a href="link1">Loremipsum1</a></li>

<li id="toggle2" class="toggle"><a href="link2">Loremipsum2</a></li>

<li id="toggle3" class="toggle"><a href="link3">Loremipsum3</a></li>

</ul>

</div>

<script>

//toggle1

jQuery(document).ready(function()

{

$('.toggler').on('click',function(){

var idAlpha=$(this).data('id');

var idBeta = '#'+idAlpha;

$('.toggle').hide();

$(idBeta).show();

var idCouleur = '#'+$(this).attr('id');

var couleur = $(this).data('couleur');

$(idCouleur).attr('style', 'background-color:'+couleur+';');

});

</script>

-
Edité par A1B2 21 février 2018 à 17:54:33

Sanapag

22 février 2018 à 8:28:53

Re,

J'ai trouvé la solution a ton problème.

Tu ne dois pas faire apparaître le background color quand il est activé (enfin si mais pas que :p) tu dois aussi retirer le style des autres "icones", pour cela il faut que tu ajoute dans ton code une ligne qui au click (du coup dans la même fonction), passe tout tes "icones" avec un texte noir et ensuite tu applique la couleur comme en ce moment (c'est juste une ligne a rajouter:p)

A1B2

22 février 2018 à 17:39:36

et voilà, ça marche Merci pour ton aide

Voici le code complet:

<div class="icone">

<p id="toggler1" class="toggler" data-id="toggle1" data-couleur="red">Test1</p>

<p id="toggler2" class="toggler" data-id="toggle2" data-couleur="green">Test2</p>

<p id="toggler3" class="toggler" data-id="toggle3" data-couleur="blue">Test3</p>

</div>

<div class="zone-texte">

<ul>

<li id="toggle1" class="toggle"><a href="link1">Loremipsum1</a></li>

<li id="toggle2" class="toggle"><a href="link2">Loremipsum2</a></li>

<li id="toggle3" class="toggle"><a href="link3">Loremipsum3</a></li>

</ul>

</div>

          jQuery(document).ready(function()
          {
            $('.toggler').on('click',function(){
              var idAlpha=$(this).data('id');
              var idBeta = '#'+idAlpha;
              $('.toggle').hide();
              $(idBeta).show();

              var idCouleur = '#'+$(this).attr('id');
              var couleur = $(this).data('couleur');

              $('.toggler').removeAttr('style');
              $(idCouleur).attr('style', 'background-color:'+couleur+';');
            });
          });

</script>

-
Edité par A1B2 22 février 2018 à 17:59:45