Question

开始学习一些HTML，CSS和JQuery。这是非常有趣和用户友好的，但我有部分问题。我有一个图像设置为背景，它上面有一些白色的星星。我有一个相同大小的金色星形图像，它位于一个空白星星的顶部。我想使用切换方法在点击时显示和隐藏金色星星。我已经看了很多关于堆栈溢出和其他网站的问题，对我来说它似乎应该有效，而且我没有收到任何错误。非常感谢任何帮助，谢谢！

编辑：修复了代码，现在正在运行！

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>

Answer 1

您的身份证号错误：

在html中，img的ID为picStar1而非imgStar1，因此请更改...

另外，您不应多次使用相同的ID。 Id应该是唯一的。

要解决：

只需使用picStar1更改html imgStar1中的img id即可。

在我的背景上切换图像

1 个答案: