如何使用javascript将图片制作为链接，然后链接到另一张图片？

Question

这是我到目前为止所获得的，而且我似乎无法使其正常工作。

当您单击另一幅图像时，它就是具有id="hap_text"的图像。

<script>
$(function() {
    $('.touch_bg #touch_hap').click(function(e) {
        e.preventDefault();
        $('#hap_text').toggleClass('hidden');
    });
});
</script>

<div class="container touch_bg">
    <div>
        <a href="#"><img id="touch_hap" src="img/info/lefttouch.png"></a>
        <img id="hap_text" class="hidden" src="img/info/habitattext.png">
    </div>
</div>

和的CSS是：

.hidden {
    display: none;
}

Answer 1

未捕获的ReferenceError：未定义$

不要忘了包括jQuery。 否则，您的代码看起来不错。

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

---

 $(function() { $('.touch_bg #touch_hap').click(function(e) { e.preventDefault(); $('#hap_text').toggleClass('hidden'); }); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container touch_bg"> <div> <a href="#"> <img id="touch_hap" src="img/info/lefttouch.png"> </a> <img id="hap_text" class="hidden" src="img/info/habitattext.png"> </div> </div>