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

前端技术 2023/09/05 JavaScript

本文实例讲述了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(\'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.phpstudy.net/</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/13658

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案