gpt4 book ai didi

jquery - 使用 jQuery 更改重叠图像的 z-index

转载 作者:太空狗 更新时间:2023-10-29 15:17:51 26 4
gpt4 key购买 nike

我有三个矩形图像重叠在一条对 Angular 线上,第一个在左上角完全可见,第二个在中间部分被第一个隐藏,最后一个在右下角部分被第二个隐藏。我希望被点击的图像位于其他图像之上。我试图通过使用 jQuery 操作 z-index 来实现这一点,但它似乎不起作用。实际上,jQuery 似乎甚至都没有被识别。

这是我的测试代码:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
$(document).ready(function () {
$('#launch').click(function () {
alert('Ok');
});

$('.bottom-pic').click(function () {
$(this).css('z-index' : '1');
$('.bottom-pic').not(this).css('z-index' : '0');
});
});
</script>
<style type="text/css">
#pictures {
width: 650px;
height: 300px;

margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 50px;

position: relative;
}

#top {
top: 0;
left: 0;

position: absolute;
z-index: 1;
}

#center {
top: 60px;
left: 200px;

position: absolute;
z-index: 1;
}

#bottom {
top: 150px;
left: 400px;

position: absolute;
z-index: 0;
}
</style>
</head>
<body>
<div id="pictures">
<img src="bottom-pic.jpg" id="top" class="bottom-pic">
<img src="bottom-pic.jpg" id="center" class="bottom-pic">
<img src="bottom-pic.jpg" id="bottom" class="bottom-pic">
</div>
<input type="button" value="Try" id="launch">
</body>
</html>

当我点击“启动”按钮时,什么也没有发生。

最佳答案

好吧,我刚刚意识到你犯了一个小错误,你在加载查询和声明你的内联 javascript 时都使用了 SAME 标签……你不能那样做。您必须使用两个单独的脚本标签。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>

注意新的脚本标签:

  <script type="text/javascript">
$(document).ready(function () {
$('#launch').click(function () {
alert('Ok');
});

$('.bottom-pic').click(function () {
$(this).css('z-index', '1');
$('.bottom-pic').not(this).css('z-index', '0');
});
});
</script>

...

答案的其余部分仍然适用。也就是说,你必须去掉#top、#middle 和#bottom 中的 z-index....

关于jquery - 使用 jQuery 更改重叠图像的 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8654184/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com