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>3 réponses
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");
}
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>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>