Contoh dalam artikel ini menerangkan kaedah menggunakan JS untuk bertukar antara tiga lapisan dengan klik bertindih. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Kesan ini melaksanakan tiga atau lebih lapisan bertindih, yang bertindih mengikut peraturan tertentu Apabila anda mengklik pada mana-mana lapisan dengan tetikus, lapisan dipaparkan di bahagian atas dan berbilang lapisan ditukar secara bergilir-gilir boleh belajar pada masa yang sama CSS juga merupakan contoh rujukan yang baik Fungsi contoh ini memerlukan kod JavaScript.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-3ccd-tab-click-cha-style-codes/
Kod khusus adalah seperti berikut:
<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>
Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.