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'); 
});