JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<ul id="small">
    <li><a href="#"><img src="http://4.bp.blogspot.com/_vyAoR1jlf3M/S0hYrlg3rEI/AAAAAAAAAEU/4VDyKJfh93E/s320/Smiley+%3DD.png" /></a>image1</li>
    <li><a href="#"><img src="http://4.bp.blogspot.com/_vyAoR1jlf3M/S0hYrlg3rEI/AAAAAAAAAEU/4VDyKJfh93E/s320/Smiley+%3DD.png" /></a>image2</li>
    <li><a href="#"><img src="http://4.bp.blogspot.com/_vyAoR1jlf3M/S0hYrlg3rEI/AAAAAAAAAEU/4VDyKJfh93E/s320/Smiley+%3DD.png" /></a>image3</li>
    <li><a href="#"><img src="http://4.bp.blogspot.com/_vyAoR1jlf3M/S0hYrlg3rEI/AAAAAAAAAEU/4VDyKJfh93E/s320/Smiley+%3DD.png" /></a>image4</li>
</ul>

CSS

ul li a img {
    height: 50px;
}

.small_li_active,
.small_list_hover {
   color: red;
}

JavaScript

$('#small li').hover(function () {
    $(this).addClass('small_list_hover');
}, function () {
    $(this).removeClass('small_list_hover');
});


$('#small a').click(function(){
  $(this).closest('li').addClass('small_li_active')
       .siblings().removeClass('small_li_active');
    
    
    return false;
});
$("#small li").addClass("js");
	$("#small li").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      }, 
      function () {
        $(this).animate({backgroundPosition:"(0 -62px)"}, 200);
      }
    ); 
    $("#small li").each(function() {
		if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
		$(this).removeClass("navOff");
		$(this).addlass("selected");
	});