如何在 HTML,CSS,JS 中更改响应式导航栏中的活动选项卡？

Question

在此导航栏中，当鼠标悬停在导航栏的不同 link 上时，动画框出现在鼠标悬停的框上，但当用户单击新的 link动画框不会停留在活动状态 link 它会重置为导航栏中的顶部项目。

我尝试使用 JavaScript 更改动画框的位置但我没有成功

我正在使用 top: 属性

更改动画框的位置

非常感谢您的帮助。

请根据您的情况更改html文件中的css<link rel="stylesheet" href="../css/home.css">link。

请运行 code snippet 以更好地了解问题。 抱歉语法错误。

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

您的 eid 始终等于 3，因为您每次都通过引用访问相同的对象，这就是您的代码不起作用的原因。它正在发生，因为你声明了 var i 而不是 let i，所以 i 等于 3 对于每个 link，所以你有 (0,1,2) 而不是(3,3,3)。使用 var.

时要小心

您的代码也可以简化为：

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

抱歉，我已将您的大部分脚本放在评论中，但我解决了您的问题

这是脚本

<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>

主要变化：

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"
});
}

如何在 HTML,CSS,JS 中更改响应式导航栏中的活动选项卡？

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

html

javascript

css

animation

navigationbar