Javascript 如何在HTML、CSS和JS中更改响应导航栏中的活动选项卡？_Javascript_Html_Css_Animation_Navigationbar

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

javascript html css animation

Javascript 如何在HTML、CSS和JS中更改响应导航栏中的活动选项卡？,javascript,html,css,animation,navigationbar,Javascript,Html,Css,Animation,Navigationbar,在此导航栏中，当鼠标悬停在导航栏的不同链接上时，动画框出现在鼠标悬停的框上，但当用户单击新链接时，动画框不会停留在活动链接上，而是重置为导航栏中的顶部项目我尝试使用JavaScript更改动画框的位置，但没有成功我正在使用top:属性更改动画框的位置非常感谢您的帮助请根据需要更改html文件中的css链接请运行代码片段，以更好地了解问题。对不起，语法有误 var links=document.getElementsByClassName（'l'）对于（变量i=0；i

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

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

我正在使用

top:

属性更改动画框的位置

非常感谢您的帮助

请根据需要更改html文件中的css

链接

请运行
代码片段
，以更好地了解问题。对不起，语法有误

var links=document.getElementsByClassName（'l'）
对于（变量i=0；i


@导入url（'https://fonts.googleapis.com/css?family=Open+Sans&display=swap'）；
身体{
背景：#2c3e5e；
字体系列：“开放式Sans”，无衬线；
}
导航{
显示：块；
背景色：#34495e；
位置：相对位置；
裕度：100px自动0；
边界半径：8px；
字号：0；
宽度：220px；
高度：自动；
盒影：0 2px 3px 0 rgba（0,0,0,0.1）；
}
导航a{
线高：50px；
颜色：白色；
文本转换：大写；
位置：相对位置；
z指数：1；
文字装饰：无；
字体大小：15px；
显示：块；
文本对齐：居中；
}
导航动画{
位置：绝对位置；
高度：50px；
宽度：100%；
顶部：0px；
z指数：0；
背景：#1abc9c；
边界半径：8px；
过渡：全部。5秒轻松0秒
}
导航a:第n个子（1）：悬停~。动画{
排名：0；
}
导航a:第n个子（2）：悬停~。动画{
顶部：50px；
}
导航a:第n个子（3）：悬停~。动画{
顶部：100px；
}
您的eid
总是相等的3
，因为您每次都通过引用访问同一个对象，这就是代码不起作用的原因。它正在发生，因为您声明了var i
而不是let i
，所以i
对于每个链接都是相等的3
，所以您没有（0,1,2）
，而是（3,3,3）
。使用var
时要小心
您的代码也可以简化为：

const links=document.getElementsByClassName（'l'））
常量animation=document.getElementById（'animation'））
for（设i=0；i

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans&display=swap'）；
身体{
背景：#2c3e5e；
字体系列：“开放式Sans”，无衬线；
}
导航{
显示：块；
背景色：#34495e；
位置：相对位置；
保证金：0自动；
边界半径：8px；
字号：0；
宽度：220px；
高度：自动；
盒影：0 2px 3px 0 rgba（0,0,0,0.1）；
}
导航a{
线高：50px；
颜色：白色；
文本转换：大写；
位置：相对位置；
z指数：1；
文字装饰：无；
字体大小：15px；
显示：块；
文本对齐：居中；
}
导航动画{
位置：绝对位置；
高度：50px；
宽度：100%；
顶部：0px；
z指数：0；
背景：#1abc9c；
边界半径：8px；
过渡：全部。5秒轻松0秒
}
导航a:第n个子（1）：悬停~。动画{
顶部：0！重要；
}
导航a:第n个子（2）：悬停~。动画{
顶部：50px！重要；
}
导航a:第n个子（3）：悬停~。动画{
顶部：100px！重要；
}
您的eid
总是相等的3
，因为您每次都通过引用访问同一个对象，这就是代码不起作用的原因。它正在发生，因为您声明了var i
而不是let i
，所以i
对于每个链接都是相等的3
，所以您没有（0,1,2）
，而是（3,3,3）
。使用var
时要小心
您的代码也可以简化为：

const links=document.getElementsByClassName（'l'））
常量animation=document.getElementById（'animation'））
for（设i=0；i

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans&display=swap'）；
身体{
背景：#2c3e5e；
字体系列：“开放式Sans”，无衬线；
}
导航{
显示：块；
背景色：#34495e；
位置：相对位置；
保证金：0自动；
边界半径：8px；
字号：0；
宽度：220px；
高度：自动；
盒影：0 2px 3px 0 rgba（0,0,0,0.1）；
}
导航a{
线高：50px；
颜色：白色；
文本转换：大写；
位置：相对位置；
z指数：1；
文字装饰：无；
字体大小：15px；
显示：块；
文本对齐：居中；
}
导航动画{
位置：绝对位置；
高度：50px；
宽度：100%；
顶部：0px；
z指数：0；
背景：#1abc9c；
边界半径：8px；
过渡：全部。5秒轻松0秒
}
导航a:第n个子（1）：悬停~。动画{
顶部：0！重要；
}
导航a:第n个子（2）：悬停~。动画{
顶部：50px！重要；
}
导航a:第n个子（3）：悬停~。动画{
顶部：100px！重要；
}

对不起，我放错了
<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"
});
}