如何管理一个页面中多个虚拟窗口，实现点击任意一个将其提升到最前（用户完全可见，不会被遮挡）

来源：互联网发布：网络出版有什么用编辑：程序博客网时间：2024/06/06 01:37

<!--如何管理一个页面中多个虚拟窗口（div，通过 z-index 进行区分），实现点击任意一个将其提升到最前（用户完全可见，不会被遮挡）--><!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><script src="jquery-1.8.3.min.js"></script><style type="text/css">* {padding: 0;margin: 0;}#wins{position:relative;}.win{width:200px;height:100px;position:absolute;}.win1{background:yellow;left:0;top:0;}.win2{background:red;left:50px;top:20px;}.win3{background:green;left:100px;top:40px;}.win4{background:blue;left:150px;top:60px;}</style></head><body><div id="wins"><div class="win win1" >1</div><div class="win win2">2</div><div class="win win3">3</div><div class="win win4">4</div></div><script type="text/javascript">$("document").ready(function(){$('.win').click(function(){$('.win').css('zIndex','1');$(this).css('zIndex','2');//this.style.zIndex=5;});});</script></body></html>

0 0