JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li><a href="#cat-600x300">Кыця один</a></li>
  <li><a href="#cat-200x300">Кыця два</a></li>
  <li><a href="#cat-200x100">Последняя кыця</a></li>
</ul>
<div class="target">
  <div><img src="http://placekitten.com/g/600/300" alt=""></div>
  <div><img src="http://placekitten.com/g/200/300" alt=""></div>
  <div><img src="http://placekitten.com/g/200/100" alt=""></div>
</div>

CSS

/* Прячем все возможные DIV-ы слайды */

.target > div {
  display: none;
}

JavaScript

// Сюда будем запоминать слайд (вернее дом узел) который надо будет скрывать перед показом следующего
var activeSlide

var menu = document.querySelector('.menu')
var target = document.querySelector('.target')
var menuItems = [].slice.call(menu.querySelectorAll('a'))
var slides = [].slice.call(target.querySelectorAll('div'))
  // тут можно вставить код, который сообщит про неконсистентные данные в menuItems, slides

// Используем делегирование: обрабатываем все клики на родительском узле, распознавая клики по ссылкам из menuItems
menu.addEventListener('click', function(event) {
  var clickTarget = event.target
  if (clickTarget.nodeName !== 'A') {
    return
  }
  var menuItemIndex = menuItems.indexOf(clickTarget)
  if (menuItemIndex !== -1) {
    // Не производим переход по ссылке
    event.preventDefault()
      // При первом клике может не быть значения
    if (activeSlide) {
      activeSlide.style.display = 'none'
    }
    activeSlide = slides[menuItemIndex]
    activeSlide.style.display = 'block'
  }
})