2013-03-14 2 views
0

Может ли кто-нибудь сказать мне, как я могу изменить ниже код для отображения изображения в div при щелчке пользователем по ссылке?Как показать изображение в div с jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("a").click(function() { 
     $("#imageBox").html("<img src=' + this.href + '>"); 
    }); 
</script> 
</head> 
<body> 
    <a href="background.jpg" class="sideLoad">Link to image 1</a> 
    <a href="background.jpg" class="sideLoad">Link to image 2</a> 
    <div id="imageBox"></div> 
</body> 
</html> 

ответ

2

Ваш код должен быть в .ready

$(function(){ 
    $("a.my-class").click(function(e) { 
     e.preventDefault(); 
     $("#imageBox").html('<img src="' + this.href + '" />'); 
    }); 
}) 

Это позволит включить функцию для a элементов с классом myclass, другие будут нормально функционировать

Демо: Fiddle

+0

Вы можете изменить ваш код, чтобы открыть только href со специальным id или классом? –

+0

@ PrzemysławSuszek сделано –

+0

обновленная скрипка http://jsfiddle.net/arunpjohny/ksBGu/3/ –

0

Вы на правильном пути. Существует два способа: 1) добавить тег <img> в div или 2) изменить фоновое изображение с помощью JS/css.

Изменение:

$("#imageBox").html("<img src=' + this.href + '>"); 

To:

$("#imageBox").html("<img src=\"" + this.href + "\">"); 

Ваши цитаты были неправы.

Смежные вопросы