如何使用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>