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

【问题标题】：How to change the active tab in a responsive navigation bar in HTML,CSS,JS?如何在 HTML、CSS、JS 的响应式导航栏中更改活动选项卡？
【发布时间】：2021-05-29 07:43:26
【问题描述】：

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

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

我正在使用top: 属性更改动画框的位置

非常感谢您的帮助。

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

请运行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>

【问题讨论】：

只是让您知道在您的 html 中 <a href="#" id="3" calss="l"> Complaint Record</a> 的拼写错误应该是 class 而不是 calss 可能会导致问题。
我把课程修好了，但问题还是一样。我更改活动链接的逻辑是否正确？你有这个问题的解决方案吗？
我也有同样的问题！

标签： javascript html css animation navigationbar

【解决方案1】：

您的eid 始终等于3，因为您每次都通过引用访问同一个对象，这就是您的代码不起作用的原因。它正在发生，因为你声明了var i 而不是let i，所以i 对于每个链接都等于3，所以你有(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>

【讨论】：

【解决方案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"
});
}

【讨论】：

嗨，你好，在 for 循环结束时，我将有一个永久值 3，这将有一个错误的输出。你应该尝试一次。我想感谢 Vishal Suryawanshi，因为他很有创意。