Changer l'icône au clic puis revenir à l'original au prochain clic

Question

J'ai un ensemble d'onglets qui lorsque vous cliquez sur un, la couleur d'arrière-plan devient rouge. Si vous n'avez pas cliqué sur un onglet, l'arrière-plan est blanc. Il y a une icône dans chaque onglet, de couleur blanche (si vous avez cliqué sur l'onglet) ou rouge (si vous ne cliquez pas sur l'onglet). J'ai du mal à faire passer l'icône à la bonne couleur lorsque les onglets sont cliqués (ou non cliqués). Les icônes sont des images, soit dit en passant.

C'est ce que j'ai jusqu'à présent. Je peux changer les couleurs d'arrière-plan, mais je ne sais pas comment je dois changer d'image. La classe active-tab contrôle la couleur d'arrière-plan.

if($('.tab-container').length > 0){

  $('.tab a').on('click', function(e){
    $('.tab').removeClass('active-tab');
    $(this).parent().addClass('active-tab');
    $(this).find('img').attr('src','https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png');
  });


}

img{
  width: 48px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tab-container'>
         <div class='tab'>
	          <a href='#this-is-the-first-tab' id='this-is-the-fist-tab'>
		          <img src='https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg' class='tab-icon'> 
	         </a>
        </div>
    </div>

javascript jquery html css

0

user9269948 13 avril 2018 à 23:40

Answer 1

if ($('.tab-container').length > 0) {
  $('.tab img').on('click', function(e) {
    $('.tab-icon').toggleClass('active-tab')
  });
}

 .active-tab{
    content:url("https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tab-container'>
  <div class='tab'>
    <a href='#this-is-the-first-tab' id='this-is-the-fist-tab'>
      <img height="50" width="50" id="x" src='https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png' class='tab-icon'>
    </a>
  </div>
</div>

Vous pouvez ajouter l'image src à la classe active-tab et elle devrait changer comme l'arrière-plan.

.active-tab{
content:url("//tab-icon-default.png");
}

2

Scath 13 avril 2018 à 21:15

Answer 2

Je suggérerais plutôt, pour utiliser un CSS sur la balise img, que lorsque vous cliquez dessus, la couleur change sans que vous changiez la source d'image réelle (il y aura cependant quelques problèmes de compatibilité avec le navigateur).

Exemple qui fonctionne en survol:

body {
	background: #444;
}

.square {
	width: 10rem;
	height: 10rem;
	background: #fff;
	display: block;
}

.square:hover {
		filter: brightness(0.35) sepia(1)
 hue-rotate(310deg) saturate(7);
	}

<div class="square"></div>

-1

mrchaarlie 13 avril 2018 à 20:58

Answer 3

Vous pouvez vérifier si le parent a la classe active-tab, si oui, changez l'image puis supprimez la classe.
Cette réponse n'est qu'une aide à la logique, vous devrez peut-être changer en fonction de vos besoins, mais c'est une façon de suivre.

Jetez un œil à l'extrait.

if($('.tab-container').length > 0){
  $('.tab a').on('click', function(e){
    
    var myPath = '';
    if ($('.tab').hasClass('active-tab')){
      myPath='https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg';
      $('.tab').removeClass('active-tab');

    }else{
      myPath = 'https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png';
      $('.tab').addClass('active-tab');
    }
    
    $(this).find('img').attr('src', myPath);
  });
}

img{
  width: 48px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tab-container'>
         <div class='tab'>
	          <a href='#this-is-the-first-tab' id='this-is-the-fist-tab'>
		          <img src='https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg' class='tab-icon'> 
	         </a>
        </div>
    </div>

0

Calvin Nunes 13 avril 2018 à 20:58

Changer l'icône au clic puis revenir à l'original au prochain clic

3 réponses

Questions connexes

De nouvelles questions

javascript