0

Нужно сделать так, чтобы при клике на ссылку "Имя2" в h4 выводилось Имя2 и картинка менялась на "image2.jpg" и соответственно то же самое и с "Имя3"

HTML

<ul>
    <li><a href="">Имя1</a></li>
    <li><a href="">Имя2</a></li>
    <li><a href="">Имя3</a></li>
</ul>
<img src="image1.jpg" alt="">
<h4>Имя1</h4>

1

2 ответа 2

0

И вариант на jQuery:

$('a').click(function(e){
  e.preventDefault();
  $('h4').text($(this).text());
  $('img').attr('src',$(this).attr('href'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="https://womanjour.ru/wp-content/uploads/2020/10/80666955470-6.jpg">Имя1</a></li>
    <li><a href="https://img3.goodfon.ru/original/4807x3637/5/b4/gorod-ulica-sankt-peterburg.jpg">Имя2</a></li>
    <li><a href="http://zvetnoe.ru/upload/catalog/2015/11/CG6321.jpg">Имя3</a></li>
</ul>
<img src="https://womanjour.ru/wp-content/uploads/2020/10/80666955470-6.jpg" alt="" width="200">
<h4>Имя1</h4>

0

Как-то так

let links = document.getElementsByTagName("a");
let img = document.getElementsByTagName("img")[0];
let h4 = document.getElementsByTagName("h4")[0];

[...links].forEach(link=> link.addEventListener("click", function(e){
 e.preventDefault();
 let number = this.parentElement.innerText.replaceAll("Имя", "");
 console.log(`image${number}.jpg`);
 img.src = `image${number}.jpg`;
 h4.innerText = this.parentElement.innerText;
}));
<ul>
    <li><a href="">Имя1</a></li>
    <li><a href="">Имя2</a></li>
    <li><a href="">Имя3</a></li>
</ul>
<img src="image1.jpg" alt="">
<h4>Имя1</h4>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.