How to change the active tab in a responsive navigation bar in HTML,CSS,JS?

Question

In this navigation bar when the mouse hovers over the different links of the navigation bar the animation box comes on the box where the mouse is hovering but when the user clicks the new link the animation box does not stay on the active link it resets to the top item in the navigation bar.

I tried to change the position of the animation box using JavaScript but I did not succeed

I am changing the position of the animation box using top: property

Please help would be really appreciated.

please change the css <link rel="stylesheet" href="../css/home.css"> link in html file according to you.

Please run the code snippet to get a better view of the question. sorry for any wrong grammar.

 var links = document.getElementsByClassName('l') for (var i = 0; i < links.length; i++) { links[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); var eid = current[0].id switch (eid) { case 1: style = document.createElement('style') style.innerHTMl = ".animation {top:0px}" document.body.appendChild(style) break; case 2: style = document.createElement('style') style.innerHTMl = ".animation {top:50px}" document.body.appendChild(style) break; case 3: style = document.createElement('style') style.innerHTMl = ".animation {top:100px}" document.body.appendChild(style) break; } current[0].className = "l"; this.className = "l" + " " + "active"; }) }

 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { background: #2c3e5e; font-family: 'Open Sans', sans-serif; } nav { display: block; background-color: #34495e; position: relative; margin: 100px auto 0; border-radius: 8px; font-size: 0; width: 220px; height: auto; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1); } nav a { line-height: 50px; color: white; text-transform: uppercase; position: relative; z-index: 1; text-decoration: none; font-size: 15px; display: block; text-align: center; } nav.animation { position: absolute; height: 50px; width: 100%; top: 0px; z-index: 0; background: #1abc9c; border-radius: 8px; transition: all.5s ease 0s } nav a:nth-child(1):hover~.animation { top: 0; } nav a:nth-child(2):hover~.animation { top: 50px; } nav a:nth-child(3):hover~.animation { top: 100px; }

 <nav> <a href="#" id="1" class="l active">Student BioData</a> <a href="#" id="2" class="l">Student Acadmics</a> <a href="#" id="3" class="l">Complaint Record</a> <div id='animation' class="animation"></div> </nav>

Answer 1

Your eid is always equal 3 , because you are accessing same object by reference every time, that's why your code doesn't work. It's happening, because you declared var i instead of let i , so i is equal 3 for every link, so instead of (0,1,2) you have (3,3,3) . Be careful while using var .

Also your code can be simplified to this:

 const links = document.getElementsByClassName('l') const animation = document.getElementById('animation') for (let i = 0; i < links.length; i++) { links[i].addEventListener("click", function() { animation.style.top = (i * 50) + "px" }) }

 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { background: #2c3e5e; font-family: 'Open Sans', sans-serif; } nav { display: block; background-color: #34495e; position: relative; margin: 0 auto; border-radius: 8px; font-size: 0; width: 220px; height: auto; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1); } nav a { line-height: 50px; color: white; text-transform: uppercase; position: relative; z-index: 1; text-decoration: none; font-size: 15px; display: block; text-align: center; } nav.animation { position: absolute; height: 50px; width: 100%; top: 0px; z-index: 0; background: #1abc9c; border-radius: 8px; transition: all.5s ease 0s } nav a:nth-child(1):hover~.animation { top: 0;important: } nav a:nth-child(2).hover~:animation { top; 50px:important: } nav a.nth-child(3):hover~;animation { top: 100px !important; }

 <nav> <a href="#" id="1" class="l active">Student BioData</a> <a href="#" id="2" class="l">Student Acadmics</a> <a href="#" id="3" class="l">Complaint Record</a> <div id='animation' class="animation"></div> </nav>

Answer 2

Sorry I have put most your script inside comment but I solved your problem

Here is the script

<head>
<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
    body {
    background: #2c3e5e;
    font-family: 'Open Sans', sans-serif;
    }
    
    nav {
    display: block;
    background-color: #34495e;
    position: relative;
    margin: 100px auto 0;
    border-radius: 8px;
    font-size: 0;
    width: 220px;
    height: auto;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 0 300px #000;
    }
    
    nav a {
    line-height: 50px;
    color: white;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    text-decoration: none;
    font-size: 15px;
    display: block;
    text-align: center;
    }
    
    nav .animation {
    position:absolute;
    height: 50px;
    width: 100%;
    top: 0px;
    z-index: 0;
    background: #1abc9c;
    border-radius: 8px;
    transition: all .5s ease 0s;
    }
    
/*  nav a:nth-child(1):hover~.animation {
    top: 0;
    }
    
    nav a:nth-child(2):hover~.animation {
    top: 50px;
    }
    
    nav a:nth-child(3):hover~.animation {
    top: 100px;
    } */
</style>
  <title>Home</title>
</head>

<body>
  <nav>
    <a href="#" id="1" class="l active">Student BioData</a>
    <a href="#" id="2" class="l">Student Acadmics</a>
    <a href="#" id="3" class="l">Complaint Record</a>
    <div id='animation' class="animation" ></div>
  </nav>
  <script>/*
    var links = document.getElementsByClassName('l')
    for (var i = 0; i < links.length; i++) {
      links[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        var eid = current[0].id
        switch (eid) {
          case 1:
            style = document.createElement('style')
            style.innerHTMl = ".animation {top:0px}"
            document.body.appendChild(style)
            break;
          case 2:
            style = document.createElement('style')
            style.innerHTMl = ".animation {top:50px}"
            document.body.appendChild(style)
            break;
          case 3:
            style = document.createElement('style')
            style.innerHTMl = ".animation {top:100px}"
            document.body.appendChild(style)
            break;
        }
        current[0].className = "l";
        this.className = "l" + " " + "active";
      })
    }*/
    var links = document.querySelectorAll(".l");
    for(i=0;i<=links.length;i++){
        links[i].addEventListener("click", function(){
            let e = this.id;
            document.querySelector(".animation").style.top = Math.floor((e-1)*50) + "px" ;
        });
    }
  </script>
</body>

Main change:

var links=document.querySelectorAll(".l");
for(i=0;i<=links.length;i++){
   links[i].addEventListener("click",function(){
      let e = this.id;
      document.querySelector(".animation").style.top = Math.floor(50*(e-1)) + "px"
});
}