Façon de gérer différents ID de superposition : utilisez la même fonction JavaScript
P粉511757848
2023-09-04 22:36:35
<p>Je souhaite afficher des superpositions pour différents liens. La première superposition contient une image et du texte, tandis que si l'on clique sur le lien 2, elle doit afficher la superposition 2 avec la même structure mais un contenu différent. S'il vous plaît, aidez-moi à obtenir le résultat souhaité. </p>
<p>
<pre class="brush:js;toolbar:false;">fonction on() {
document.getElementById("overlay").style.display = "block";
}
fonction on1() {
document.getElementById("overlay1").style.display = "block";
}
fonction désactivée() {
document.getElementById("overlay").style.display = "aucun";
}</pré>
<pre class="brush:css;toolbar:false;">.img {
transition : transformer les 5 s en une entrée-sortie facile ;
transformation : échelle(1);
origine de transformation : 0 0 ;
}
.img: survoler {
transformation : échelle (1,25)
}
#recouvrir,
#superposition1 {
poste : fixe ;
affichage : aucun ;
largeur : 100 % ;
hauteur : 100 % ;
haut : 0 ;
gauche : 0 ;
à droite : 0 ;
bas : 0 ;
couleur de fond : blanc ;
indice z : 77777772 ;
curseur : pointeur ;
}
#texte,
#texte 1 {
poste : fixe ;
haut : 20 % ;
gauche : 5 % ;
// taille de police : 50 px ;
la couleur noire;
// transformation : traduire(-50%,-50%);
// -ms-transform : traduire (-50%,-50%);
}</pré>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
<div id="text">
<div style="largeur : 48 %; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Faites découvrir les immenses talents des gens qui vivent dans la vallée. </p>
</div>
<div style="largeur : 50 %; float:right; margin-top:-220px;
">
<img class="img" style="hauteur:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="largeur : 48 %; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Faites découvrir les immenses talents des habitants de la vallée. </p>
</div>
<div style="largeur : 50 %; float:right; margin-top:-220px;
">
<img class="img" style="hauteur:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">En savoir plus -></a>
<a onclick="on(id)"style="font-size: 11pt;">En savoir plus -></a>
1. Liste des éléments</pre>
</p>
Il existe de meilleures façons de mettre en œuvre cela, mais en fonction de vos besoins, vous pouvez transmettre différents
ids
和actions
作为params
à la même fonction, comme ceci