Question

我的JavaScript代码存在问题。

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

以下是代码：

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

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

我希望有人可以帮助我。

Answer 1

类删除或添加逻辑将在处理程序内，并且索引应该从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");
    });
}

Answer 2

你可以试试这个......

删除.class并将其设为class =“navbar navbar-default navbar-fixed-top”

HTML -

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

JS ＆amp; JQ

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

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

doc

https://api.jquery.com/removeAttr/

在按钮上单击设置Navbar Invisible

2 个答案: