将 img 替换为点击链接

Question

我有 3 个 img 图片和 3 个链接。每个链接都有自己的图片。单击链接时我想替换图片。现在它替换但它重新启动窗口。我不想重启。

<div class="home-actions" >

    <img class="home-actions__img" src="{{asset('images/ohdaihiep/block3/bg3_1.jpg')}}" alt="" id="my_image" >

    <a href="#" id="my_a"  class="home-actions__bg3-1" ></a>

    <a href="#" id="my_a2" class="home-actions__bg3-2" ></a>

    <a href="#" id="my_a3" class="home-actions__bg3-3" ></a>

</div>

还有我的 jQuery 代码

$(function () {

    $("#my_a").bind("click", function () {

        $("#my_image").attr("src", "images/ohdaihiep/block3/bg3_1.jpg");

    });

    $("#my_a2").bind("click", function () {

        $("#my_image").attr("src", "images/ohdaihiep/block3/bg3_2.png");

    });

    $("#my_a3").bind("click", function () {

        $("#my_image").attr("src", "images/ohdaihiep/block3/bg3_3.jpg");

    });

Answer 1

这是它不会重新启动的方式$("#my_a").bind("click", function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; $("#my_image").attr("src","images/ohdaihiep/block3/bg3_1.jpg");});$("#my_a2").bind("click", function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; $("#my_image").attr("src","images/ohdaihiep/block3/bg3_2.png");});$("#my_a3").bind("click", function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; $("#my_image").attr("src","images/ohdaihiep/block3/bg3_3.jpg");});

Answer 2

Use this code I hope helpful$("#my_a").bind("click", function(e) {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; $("#my_image").attr("src","images/ohdaihiep/block3/bg3_1.jpg");});$("#my_a2").bind("click", function(e) {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; $("#my_image").attr("src","images/ohdaihiep/block3/bg3_2.png");});$("#my_a3").bind("click", function(e) {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; $("#my_image").attr("src","images/ohdaihiep/block3/bg3_3.jpg");});