jquery更改点击图像

Question

我目前正在建立一个完整的背景图像布局，我想根据用户访问的页面来改变图像。为了说明问题：当用户点击链接时，我需要更改图片属性。这是我在多大程度上得到：

$(function() { 
    $('.menulink').click(function(){ 
    $("#bg").attr('src',"img/picture1.jpg"); 
    }); 
}); 

 

<a href="" title="Switch" class="menulink">switch me</a> 
    <img src="img/picture2.jpg" id="bg" /> 

谢谢你，可能简单的东西，但在我的头上！

Answer 1

它会切换回来，因为默认情况下，当您单击一个链接时，它会跟随该链接并加载该页面。 就你而言，你不需要那个。你可以通过执行e.preventDefault（）来阻止它。 （如尼尔提到的）或返回false：

$(function() { 
$('.menulink').click(function(){ 
    $("#bg").attr('src',"img/picture1.jpg"); 
    return false; 
}); 
}); 

Interesting question上防止违约和返回false之间的区别。

在这种情况下，返回false将工作得很好，因为事件不需要传播。

Answer 2

我会帮你一个秒生病让你成为一个小提琴^ _^

UPDATE

你需要使用preventDefault()使它所以当ü点击该链接不经过：

小提琴：http://jsfiddle.net/maniator/Sevdm/

$(function() { 
$('.menulink').click(function(e){ 
    e.preventDefault(); 
    $("#bg").attr('src',"img/picture1.jpg"); 
}); 
}); 

Answer 3

您应该考虑使用和宽松为此。链接一般应该用于链接的。按钮可用于您希望添加的其他功能。 Neal解决方案有效，但是它是一种解决方法。

如果您使用<button>而不是<a>，您的原始代码应该按预期工作。

Answer 4

你可以使用“attr”功能！ st like`$（“＃id”）。attr（'src'，“source”）;

Answer 5

当您单击该文本或链接的图像将被更改为另一形象，你可以使用下面的脚本可以帮助你改变图像点击链接：

<script> 
$(document).ready(function(){ 
$('li').click(function(){ 
var imgpath = $(this).attr('dir'); 
$('#image').html('<img src='+imgpath+'>'); 
}); 
$('.btn').click(function(){ 
$('#thumbs').fadeIn(500); 
$('#image').animate({marginTop:'10px'},200); 
$(this).hide(); 
$('#hide').fadeIn('slow'); 
}); 
$('#hide').click(function(){ 
$('#thumbs').fadeOut(500,function(){ 
$('#image').animate({marginTop:'50px'},200); 
}); 
$(this).hide(); 
$('#show').fadeIn('slow'); 
}); 
}); 
</script> 




<div class="sandiv"> 
    <h1 style="text-align:center;">The Human Body Parts :</h1> 
    <div id="thumbs"> 
    <div class="sanl"> 
    <ul> 
    <li dir="5.png">Human-body-organ-diag-1</li> 
    <li dir="4.png">Human-body-organ-diag-2</li> 
    <li dir="3.png">Human-body-organ-diag-3</li> 
    <li dir="2.png">Human-body-organ-diag-4</li> 
    <li dir="1.png">Human-body-organ-diag-5</li> 
    </ul> 
    </div> 
    </div> 
    <div class="man"> 
    <div id="image"> 
    <img src="2.png" width="348" height="375"></div> 
    </div> 
    <div id="thumbs"> 
    <div class="sanr" > 
    <ul> 
    <li dir="5.png">Human-body-organ-diag-6</li> 
    <li dir="4.png">Human-body-organ-diag-7</li> 
    <li dir="3.png">Human-body-organ-diag-8</li> 
    <li dir="2.png">Human-body-organ-diag-9</li> 
    <li dir="1.png">Human-body-organ-diag-10</li> 
    </ul> 
    </div> 
    </div> 
    </div> 

CSS：

<style> 
body{ font-family:Tahoma, Geneva, sans-serif; color:#ccc; font-size:11px; margin:0; padding:0; background-color:#111111} 
.sandiv{ width:980px;height:570px;margin:0 auto;margin-top:20px; padding:10px; background-color:#000;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666;} 
#image{width:348px; height:375px; border-radius:100%;margin:0 auto; margin-top:50px; margin-bottom:20px;} 
#thumb{width:400px;margin:0 auto; display:none;} 
ul{list-style:none; padding:0; margin:0;} 
li{ width:auto ; height:50px; border-radius:100%; margin:5px; cursor:pointer; } 
.sanl 
{ 
margin-top:50px; 
float:left; 
width:210px; 
margin-left:30px; 
margin-right:30px; 
    } 
.sanr 
{ 
    margin-top:50px; 
float:left; 
width:210px; 
margin-left:60px; 
margin-right:30px; 
} 
.man 
{ 
float:left; 
width:350px; 
margin-left:30px; 
margin-right:30px; 
} 
</style> 

我觉得上面的代码对你很有用。这个代码我从here或demo这里供您参考

Answer 6

$('div#imageContainer').click(function() { 
     $('div#imageContainerimg').attr('src', 'YOUR NEW IMAGE URL HERE'); 
});