Reputation: 9
I have 3 img pic and 3 link. Every link have own pic. I want replace pic when click on link. Now it replace but it restart window. I dont want restart.
<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>
And my jQuery code
$(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");
});
Upvotes: 0
Views: 70
Reputation: 65
Use this code I hope helpful
$("#my_a").bind("click", function(e) {
e.stopPropagation();
$("#my_image").attr("src","images/ohdaihiep/block3/bg3_1.jpg");
});
$("#my_a2").bind("click", function(e) {
e.stopPropagation();
$("#my_image").attr("src","images/ohdaihiep/block3/bg3_2.png");
});
$("#my_a3").bind("click", function(e) {
e.stopPropagation();
$("#my_image").attr("src","images/ohdaihiep/block3/bg3_3.jpg");
});
Upvotes: 0
Reputation: 15223
this is how it will not restart
$("#my_a").bind("click", function(event) {
event.preventDefault();
$("#my_image").attr("src","images/ohdaihiep/block3/bg3_1.jpg");
});
$("#my_a2").bind("click", function(event) {
event.preventDefault();
$("#my_image").attr("src","images/ohdaihiep/block3/bg3_2.png");
});
$("#my_a3").bind("click", function(event) {
event.preventDefault();
$("#my_image").attr("src","images/ohdaihiep/block3/bg3_3.jpg");
});
Upvotes: 2