JSFiddle - React, Tailwind, and code Playground

HTML

<div class="photo"><img id="photo" src="images/slides/1.jpg"></div>
<div id="menu">
<div><a class="link" href="#1">test</a></div>
<a href="#1" title="1"></a><img class="thumb" src="images/slides/thumb/1.jpg">
<div><a class="link" href="#2">test1</a></div>
<a href="#2" title="2"></a><img class="thumb" src="images/slides/thumb/2.jpg">
<div><a class="link" href="#3">test2</a></div>
<a href="#3" title="3"></a><img class="thumb" src="images/slides/thumb/3.jpg">
</div>

CSS

.photo {max-height: 300px;}
.selected {text-decoration: underline; font-weight: bold; text-transform: uppercase;}

JavaScript

(function ($){
    $(function(){
        var 
            photo = $("#photo"),
            thumb = $(".thumb"),
            link = $(".link");
            
        $("#menu a").on("click", function(){
            var clicked = window.location.hash[1] || window.location.href.split("#")[1];
            photo.attr("src", "images/slides/" + clicked + ".jpg");
            link.removeClass('selected');
            $(this).addClass('selected');
            return false;
        });
    });
})(jQuery);