Изменение img src на странице навигации, нажав на главной странице

Question

Я довольно новичок в JS, jQuery и всех остальных.

У меня есть панель навигации для приложения, в верхней части которой изображение должно быть изменено, когда я нажимаю на картинку/ссылку на моей домашней странице.

HTML для навигации, которые необходимо изменить

 <img class="campus" src="img/Dansaertrond.png"> 
     <h4>Stuvo <span class="light">EhB</br> 
     Campus</span></h4> 

HTML для домашней страницы, где фотографии приходят из изменить

 <div class="campus"> 
     <a href="#"> 
     <img class="photo" src="img/Dansaert.png"> 
     </a> 
     <a href="#"> 
     <img class="photo2 " src="img/kaai.png"> 
     </a> 
     <a href="#"> 
     <img class="photo" src="img/ttk.png"> 
     </a> 
     <a href="#"> 
     <img class="photo2 " src="img/RITS.png"> 
     </a> 
     <a href="#"> 
     <img class="photo" src="img/KCB.png"> 
     </a> 
     <a href="#"> 
     <img class="photo2 " src="img/jette.png"> 
     </a> 
     </div> 

Объяснить быстро - если вы запустите приложение, которое вы видите на главную страницу со всеми фотографиями, вы нажимаете один, и этот снимок появляется на экране навигации, так же, если вы его снова измените.

Обычные вещи, которые вы находите для изменения img src, не являются тем, что мне нужно, потому что это просто изменение изображения, щелкнув по нему, что мне не нужно.

Кто-нибудь знает, как это сделать или если это возможно?

Answer 1

Во-первых, было бы легче ответить, если вы включили некоторые более полную информацию о вашей проблемой, возможно, некоторые фрагменты кода. Это ответ на ваш вопрос?

Changing the image source using jQuery

В противном случае,

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

$('#red').click(function() { 
 
    $('#nav-img').attr("src","red.png").removeClass('green').addClass('red'); 
 
}); 
 
        
 
$('#green').click(function() { 
 
    $('#nav-img').attr("src","green.png").removeClass('red').addClass('green'); 
 
});

#red, .red { 
 
    background-color: red; 
 
    height: 20px; 
 
    width: 20px; 
 
} 
 

 
#green, .green { 
 
    background-color: green; 
 
    height: 20px; 
 
    width: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="nav-bar"> 
 
    <img src="red.png" id="nav-img" class="red"> 
 
</div> 
 
<div class="home-content"> 
 
    <img src="red.png" id="red"> 
 
    <img src="green.png" id="green"> 
 
</div>

Answer 2

$(document).ready(function() { 
 
    $('div.campus img').on('click', function() { 
 
    var newSrc = $(this).attr('src'); 
 
    $('img.campus').attr('src', newSrc); 
 
    });      
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="campus"> 
 
    <img src="http://www.adweek.com/socialtimes/files/2012/03/The-Reply-Girl.jpg" /> 
 
    <img src="http://3.bp.blogspot.com/-e3s1wReW3d4/TgYzS8hG1CI/AAAAAAAAABM/NzRYQFTWWbM/s200/kim-kardashian-troy-jensen-nice.jpg" /> 
 
    <img src="http://slodive.com/wp-content/uploads/2012/10/gossip-girl-hairstyles/gossipgirlhairstyles200.jpg" /> 
 
</div> 
 
<hr /> 
 
<img class="campus" src="http://lorempixel.com/200/200" />

Убедитесь, что изображение, на котором вы хотите триггер нажмите имеет класс .trigger, и изображение, где вы хотите изменить ЦСИ имеет класс .target. Или замените эти классы по имени класса, которое вы в настоящее время используете.

$('img.trigger').on('click', function() { 
    var newSrc = $(this).attr('src'); 
    $('img.target').attr('src', newSrc); 
}; 

Edit: я буду корректировать решение кода:

$('div.campus img').on('click', function() { 
    var newSrc = $(this).attr('src'); 
    $('img.campus').attr('src', newSrc); 
}; 

Вы, вероятно, хотите, чтобы инициализировать обработчик событий при загрузке страницы. Распространенный способ добиться этого в JQuery использует $(document).ready():

$(document).ready(function() { 
    $('div.campus img').on('click', function() { 
     var newSrc = $(this).attr('src'); 
     $('img.campus').attr('src', newSrc); 
    }; 
}); 

Полностью рабочий пример: http://codepen.io/anon/pen/oXzZBB

Answer 3

Вместо того, чтобы получать изображение после клика вы можете играть изображение как карусель.

Попробуйте это: Bootstrap Carousel