Maison > Article > interface Web > Méthode JavaScript pour obtenir plusieurs effets de commutation de clics sur des couches superposées
L'exemple de cet article décrit comment utiliser JavaScript pour obtenir l'effet de commutation par clic de plusieurs calques qui se chevauchent. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三个层重叠,点击可切换</title> <script type="text/javascript"> function $(obj){ return document.getElementById(obj); } function change(n){ for (var i=1;i<4;i++){ if(n==i){ $("a"+i).style.zIndex="100"; }else{ $("a"+i).style.zIndex="0"; } } } </script> </head> <body> <div id="a1" style="position:absolute;left:100px;top:100px;width:100px;height:100px; background-color:#ddeeff;z-index:1" onclick="change('1')" > </div> <div id="a2" style="position:absolute;left:150px;top:130px;width:100px;height:100px; background-color:#eeffdd;z-index:2" onclick="change('2')"> </div> <div id="a3" style="position:absolute;left:200px;top:160px;width:100px;height:100px; background-color:#ffddee;z-index:3" onclick="change('3')"> </div> <div>http://www.jb51.net/</div> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!