JQuery изменение изображения при нажатии

В настоящее время я создаю полный макет фонового изображения, и я хочу изменить изображение на основе той страницы, которую пользователь посещает. Чтобы понять: мне нужно изменить атрибут изображений, когда пользователь нажимает на ссылку. Вот как я догадался:

$(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" />

Спасибо, наверное, легкий материал, но над моей головой!

Ответ 1

Отключается, потому что по умолчанию, когда вы нажимаете ссылку, она следует по ссылке и загружает страницу. В вашем случае вы этого не хотите. Вы можете предотвратить это, выполнив e.preventDefault(); (например, упомянутый Нил) или путем возврата false:

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

Интересный вопрос о различиях между предотвращением по умолчанию и возвратом false.

В этом случае return false будет работать просто отлично, потому что событие не нужно распространять.

Ответ 2

Я помогу вам сделать один шаг, чтобы вы стали скрипкой ^ _ ^

UPDATE

вам нужно использовать preventDefault(), чтобы сделать это, чтобы ссылка не проходила, когда вы нажимаете на нее:

скрипт: http://jsfiddle.net/maniator/Sevdm/

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

Ответ 3

вы можете использовать функцию "attr"!!! st, как `$ ( "# id" ). attr ('src', "source" );

Ответ 4

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

Ответ 5

Вы должны использовать кнопку для этого. Обычно ссылки должны использоваться для привязки. Кнопки могут использоваться для других функций, которые вы хотите добавить. Решение Neals работает, но его обходной путь.

Если вы используете <button> вместо <a>, ваш исходный код должен работать как ожидалось.

Ответ 6

Когда вы нажмете на текст или ссылку, изображение будет изменено на другое изображение, чтобы вы могли использовать ниже script, поможет вам изменить изображение, щелкнув ссылку:

<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>

Я думаю, что приведенный выше код очень полезен для вас. Этот код я получаю от здесь или demo здесь для ваша ссылка