开始学习一些 HTML、CSS 和 JQuery。它非常有趣且用户友好，但我在其中的某些部分遇到了一些麻烦。我有一个图像设置为背景，上面有一些白色的星星。我有一张相同大小的金色星星的图像，并将其放置在一颗空白星星的正上方。我想在点击时使用切换方法显示和隐藏金星。我在 stack overflow 和其他网站上看了很多问题，在我看来它应该可以工作，而且我没有收到任何错误。任何帮助将不胜感激，谢谢!
编辑:修复了代码，现在可以使用了!
CSS代码
#toggle {
position:absolute;
left:100px;
top:109px;
width:37px;
height:37px;
z-index:1;
}
#imgStar1 {
position:absolute;
left:1px;
top:-1px;
width:38px;
height:38px;
z-index:1;
}
HTML 和 JQuery
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/mainLayout.css" type="text/css" />
<style>
#bkgd {
background: url('images/recents.png') 0 0;
overflow: hidden;
width: 806px;
height: 481px;
z-index=-1
}
</style>
<script type="text/javascript" src="libs/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#toggle").click(function(){
$("#imgStar1").toggle();
});
});
</script>
</head>
<body>
<div id="toggle">
<img id="imgStar1" src="images/star1.png" alt="star1" width="37" height="37"/>
</div>
最佳答案
您的 ID 有误:
在 html 中 img 的 id 是 picStar1 而不是 imgStar1，所以改变它...
此外，您不应多次使用相同的 ID。 ID 应该是唯一的。
解决:
只需将 html picStar1 中的 img id 更改为 imgStar1 即可正常工作。
关于javascript - 在我的背景上切换图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25651503/