JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="menu">
<li><a class="js-show-some-cat" href="#" data-cat-id="1">Кыця один</a></li>
<li><a class="js-show-some-cat" href="#" data-cat-id="2">Кыця два</a></li>
<li><a class="js-show-some-cat" href="#" data-cat-id="3">Последняя кыця</a></li>
</ul>
<div class="target">
<div><img class="cats cat-1" src="http://placekitten.com/g/600/300" alt=""></div>
<div><img class="cats cat-2" src="http://placekitten.com/g/200/300" alt=""></div>
<div><img class="cats cat-3" src="http://placekitten.com/g/200/100" alt=""></div>
</div>
CSS
.cats {
display: none;
}
JavaScript
$(document).ready(function () {
$('.js-show-some-cat').on('click', function (e) {
e.preventDefault();
var catId = $(this).data('cat-id');
$('.cats').hide(); // Hide all cat images
$('.cat-' + catId).show(); // Show our image
return false; // Stop a href redirect
});
});