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

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

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

Answer 2

Я помогу тебе в одну секунду, сделаю тебя скрипкой ^_^

ОБНОВИТЬ

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

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