Javascript 单击按钮时将导航栏设置为不可见

我的JavaScript代码有问题

我有一个导航栏，上面有5个链接。 在默认CSS设置中，导航是固定的。但我想做的是，当有人点击其中一个链接时，将导航栏的位置从固定更改为粘滞。但我的代码似乎有一部分不起作用

代码如下：

    var header = document.querySelector("header");
var isClicked = false;
var nav = document.querySelectorAll("a");

for(var i = 1; i < 6; i++){
    nav[i].addEventListener("click", function(){
        isClicked = true;
    });
}

if(isClicked === true){
    header.classList.remove("visible");
    header.classList.add("invisible");
}

var header=document.querySelector（“header”）；
var isClicked=false；
var nav=document.queryselectoral（“a”）；
对于（变量i=1；i<6；i++）{
导航[i].addEventListener（“单击”，函数（）{
isClicked=true；
});
}
如果（isClicked==真）{
header.classList.remove（“可见”）；
header.classList.add（“不可见”）；
}

我检查了控制台，当我单击导航栏上的链接时，isclick变量变为true。 看起来我添加和删除这些类的部分代码没有执行

---

我希望有人能帮助我。

类删除或添加逻辑将在处理程序中，并且索引应该从0开始，否则第一个锚点将不会添加eventListener

var header = document.querySelector("header");
var nav = header.querySelectorAll("a");

for(var i = 0; i < 5; i++){
    nav[i].addEventListener("click", function(){
        header.classList.remove("visible");
        header.classList.add("invisible");
    });
}

var header=document.querySelector（“header”）；
var nav=header.querySelectorAll（“a”）；
对于（变量i=0；i<5；i++）{
导航[i].addEventListener（“单击”，函数（）{
header.classList.remove（“可见”）；
header.classList.add（“不可见”）；
});
}

你可以试试这个

删除.class并使其成为新的class=“navbar navbar default navbar fixed top”

html-

医生

---

您的

if

块将只执行一次。而

isClicked

回调函数在每次发出

click

事件时被激发。所以你不能期望你的头类列表每次点击都会改变。您可以简单地将

if

块放在

isClicked=true

下，我想我理解您的意思，但是头的类即使第一次单击也不会更改。

<input type="button" id="buttonChangeNav" value="make me Change!"/>

buttonChangeNav.addEventListener("click",ChangeNav,true);

function ChangeNav(){
    header.removeAttr("class");
    header.setAttribute('class', navbar navbar-default navbar-fixed-top);
}