Je crée une page pour une entreprise où elles ont des photos des 4 fondateurs tous côte à côte. Le texte sous les 4 images doit être modifié en fonction de la photo cliquée ou survolée. Donc, on dit "Mark" en gras et sous sa qualité, il aura ses qualifications. Mais cela sera tous remplacé lorsque je clique sur "Kim" qui est la photo suivante. Je suis très nouveau à HTML, CSS et n'a jamais essayé JavaScript, c'est donc ma première tentative.
Je veux que le texte soit stylé comme je le souhaite, mais je ne trouve pas un moyen de tout mettre à jour. J'ai seulement compris que je peux imprimer du texte brut. Existe-t-il un moyen d'appeler un diviser pour mettre le texte là-bas et le remplacer par un nouveau div pour chaque image clic? P>
comme au lieu d'écrire .html ("Mark fait xyz") Vous pouvez plutôt coller dans Toute la Div "TR1" avec le bouton modifié et le titre et le paragraphe? P>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
<script>
$('#Mark').click(function() {
});
$('#Kim').click(function() {
});
</script>
3 Réponses :
document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);
Notez que cette réponse nécessite l'inclusion de jQuery.
L'affiche originale a configuré leurs méthodes de clic avec jQuery. Je ne ferais pas personnellement cela avec jQuery, mais c'est comme ça qu'ils l'ont mis en place.
Je n'ai pas à le faire avec JQuery, je viens de l'avoir installé comme ça de quelques tutoriels que j'ai regardés. Que recommandez-vous d'utiliser à la place? Merci.
Ajout de certaines choses de Vanilla JS dans ma réponse
Vanilla JS signifie juste que c'est JavaScript sans aucune bibliothèque comme JQuery. Si vous apprenez JavaScript, la meilleure chose à faire est d'apprendre la vanille JavaScript en premier, mais beaucoup de gens sentent que JQuery est plus facile et est plus courte de taper..so si vous n'avez pas l'intention d'apprendre très bien JavaScript, JQuery est une Une très grande ressource pour commencer! Cette solution est un mélange de JQuery et de Vanilla JS, mais une solution comme @Hien Nguyen fourni est une bonne solution all-jquery
Vous pouvez utiliser la méthode Afficher / Masquer pour votre exigence.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
Cela fonctionne vraiment bien! Juste une chose, il semble que par défaut, aucun ne se présente. Existe-t-il un moyen de faire "TR1" être le seul qui se présente automatiquement lorsque la page est chargée?
J'ai mis à jour la réponse, seul # TR2 Affichage à la page chargée
Vous essayez d'utiliser JQuery pour y parvenir et suivez le travail. Il a utilisé la classe commune "Texte de formateur" pour masquer tous les textes de superposition à masquer au point initial. Utilisez des CSS pour effectuer le texte sur vos images. Renvoyer ce qui suit pour atteindre cela. https://www.w3schools.com/howto/howto_css_image_overlay.asp
P>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</b></h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>
<div id="tr1" class="trainer-text">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2" class="trainer-text">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>