JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<nav class="slider-nav">
        <ul class="slider-nav-menu">
            <li><a class="menu-active" href="#block1"></a></li>
            <li><a class="" href="#block2"></a></li>
            <li><a class="" href="#block3"></a></li>
            <li><a class="" href="#block4"></a></li>
            <li><a class="" href="#block5"></a></li>
        </ul>
 </nav>


<div id="block1" class="block"><h1>TEST1</h1></div>
<div id="block2" class="block"><h1>TEST2</h1></div>
<div id="block3" class="block"><h1>TEST3</h1></div>
<div id="block4" class="block"><h1>TEST4</h1></div>
<div id="block5" class="block"><h1>TEST5</h1></div>

CSS

.block{
  position: relative;
  width: 100%;
  height: 400px;
  border: 1px solid #000;  
}
#block1{
  background-color: #f00;
}
#block2{
  background-color: #0f0;
}
#block3{
  background-color: #0ff;
}
#block4{
  background-color: #f0f;
}
#block5{
  background-color: #ff0;
}
h1{
  margin: 25% 0 0 50%;
  text-decoration: none;
}
ul{
  list-style-type: none;
}

.slider-nav {
  position: fixed;
  right: 5%;
  top: 50%;
  width: 50px;
  height: 100px;
  z-index: 100;
}
.slider-nav-menu li:nth-child(even) a {
  background-color: black;
}
 .slider-nav-menu li:nth-child(odd) a {
  background-color: yellow;
}
 .slider-nav-menu a {
  display: block;
  margin: 100% 0;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}
 a.menu-active {
  position: relative;
  transform: scale(1.4);
  transiton: transform 0.5s;
}
 a.menu-active:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}

JavaScript

var navigateMenu = $(".slider-nav-menu"),
          activeMenu = $(".menu-active");

     console.log($(".slider-nav-menu a").length + " = elem");

    navigateMenu.on("click", $("li"), function(){
						$(this).find("a").removeClass("menu-active");
            $(this).find("a").addClass("menu-active");
         
    });