JSFiddle - React, Tailwind, and code Playground

by ALEKSEY SHULMAN

HTML

<div class="sidebar1" id="sideBar">
      <div class="sidebarContainer">
    	<ul class="nav">
      		<li><a href="../architecture/about">one</a></li>
      		<li><a href="../architecture/contact">two</a></li>    
      		<li><a href="../architecture/barcelona">three</a></li>      
      		<li><a href="../architecture/sumi">four</a></li>
      		<li><a href="../architecture/london">five</a></li>
    	</ul>
	  </div>
  </div>

CSS

.sidebar1.about {
background: url(http://www.computerboulevard.com/wp-content/uploads/2017/05/netwire.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right; 
}

.sidebar1.contact {
background: url(http://www.computerboulevard.com/wp-content/uploads/2017/03/bg-relocate.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
}

.sidebar1.barcelona {
background: url(http://www.computerboulevard.com/wp-content/uploads/2017/03/bg-pc.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
}

.sidebar1.sumi {
background: url(http://www.computerboulevard.com/wp-content/uploads/2015/01/home_records_gallery4.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
}

.sidebar1.london {
background: url(http://www.computerboulevard.com/wp-content/uploads/2015/01/home_records_gallery5.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
}

JavaScript

// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() {
  // Removes all previous classes but keeps sidebar1
  $('.sidebar1').removeClass().addClass('sidebar1');
  // Splits up the URL on the current href
  var URI = $(this).attr('href').split('/');
  console.log(URI[2]);
  // Applies the last part of the URL to sidebar1 
  $('.sidebar1').addClass(URI[2]);
});