0
votes

Comment puis-je modifier la couleur d'arrière-plan d'une section complète après avoir cliqué sur l'un des éléments de l'enfant?

Je travaille sur un projet personnel essayant de faire correspondre la conception ci-dessous:

Je suis sur ce que je vois comme la partie la plus difficile. Lorsque vous cliquez sur l'une des 6 boîtes de couleur différentes, il devrait y avoir d'autres informations sur les informations ci-dessous:

J'essaie de créer d'abord un changement de couleur d'arrière-plan lorsque la zone de campagne AD Facebook est cliquée. Lorsque vous avez cliqué, la couleur d'arrière-plan de tout le récipient (qui contient les 6 cases) devrait changer.

Je crois que JQuery est la bonne façon d'y aller, mais d'avoir essayé ci-dessous, il ne fonctionne pas: xxx

ou, essayez ceci pour tester s'il modifie la première sortie des 6 cases: xxx

ne fonctionne pas non plus. Comme rien ne se passe. S'il vous plaît voir ce que j'ai fait jusqu'à présent ici:

https://codepen.io / Joyfulcoding / stylo / EZWYKV

Merci beaucoup d'avance pour toute assistance.

javascript jquery html css

0 commentaires

3 Réponses :

0
votes

Vous changez la couleur du conteneur, mais cela n'est pas visible à cause des 6 boîtes de dessus. Essayez quelque chose comme ça, ce qui change la couleur de chaque boîte lorsque vous cliquez sur:

HTTPS: //codepen.io/aprouja1/pen/myweex?Editors=0010 P>

function changeBackground(){
  const clickedColor = this.style.backgroundColor;
divs.forEach(div=>div.style.backgroundColor=clickedColor)
}

1 commentaires

C'est génial merci. Comment allez-vous le faire après avoir cliqué à nouveau tout ce qui revient aux couleurs initiales?

0
votes

Vous pouvez ajouter une classe à l'élément #fbadCampaigns pour gérer les modifications CSS ou utiliser .CSS ().

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").removeClass("bg-color");
});


$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").toggleClass("bg-color");
});

2 commentaires

J'ai essayé ceci juste maintenant - Ajout d'une nouvelle classe dans le CSS, c'est-à-dire .bg-couleur {fond de couleur: bleu} et la jQuery pertinente mais rien ne se passe lorsque je clique dessus? CODEPEN.IO/JOYFULCECODING/PEN/EZWYKV

Votre CodePen mis à jour est excellent merci, je sais maintenant comment l'appliquer à tous les éléments. Cependant, le menu Hamburger sur le coin supérieur droit ne change plus à une croix lorsque vous cliquez dessus?

0
votes

Il y a quelques problèmes ici.

Supprimer votre