cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript实现多个重叠层点击切换效果的方法

JavaScript实现多个重叠层点击切换效果的方法

怪我咯
怪我咯asal
2017-06-27 11:27:361724semak imbas

本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法。分享给大家供大家参考。具体如下：

<!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(&#39;1&#39;)" >
</div>
<div id="a2"
style="position:absolute;left:150px;top:130px;width:100px;height:100px;
background-color:#eeffdd;z-index:2" onclick="change(&#39;2&#39;)">
</div>
<div id="a3"
style="position:absolute;left:200px;top:160px;width:100px;height:100px;
background-color:#ffddee;z-index:3" onclick="change(&#39;3&#39;)">
</div>
<div>http://www.jb51.net/</div>
</body>
</html>


Atas ialah kandungan terperinci JavaScript实现多个重叠层点击切换效果的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：实例详解jquery的总体架构Artikel seterusnya：简单介绍EasyUI

Artikel berkaitan

Lihat lagi