L'exemple de cet article décrit la méthode d'utilisation de JS pour basculer entre trois couches en superposant des clics. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Cet effet implémente trois calques superposés ou plus, qui se chevauchent selon certaines règles. Lorsque vous cliquez sur n'importe quel calque avec la souris, le calque est affiché en haut et plusieurs calques sont commutés alternativement. Le code est simple et vous. peut apprendre en même temps. CSS est également un bon exemple de référence. La fonction de cet exemple nécessite du code JavaScript.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-3ccd-tab-click-cha-style-codes/
Le code spécifique est le suivant :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三个或多个层重叠实现互相切换</title>
</head>
<body>
<div id="aaa" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#ddeeff;z-index:1;" onclick="moveUp(this.id)"></div>
<div id="bbb" style="position:absolute;left:150px;top:130px;width:100px;height:100px;background-color:#eeffdd;z-index:2;" onclick="moveUp(this.id)"></div>
<div id="ccc" style="position:absolute;left:200px;top:160px;width:100px;height:100px;background-color:#ffddee;z-index:3;" onclick="moveUp(this.id)"></div>
<script type="text/javascript">
var divNo = document.getElementsByTagName("div").length;
function moveUp(id)
{
divNo++;
var box = document.getElementById(id);
box.style.zIndex=divNo;
}
</script>
</body>
</html>
J'espère que cet article sera utile à la programmation JavaScript de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
