简体   繁体   English

单击时如何更改导航栏中的链接颜色

[英]How to change Link color in Navbar upon clicking

I would like to change Link (A) color in the Navbar upon clicking and also if I navigate to another Link (B) color should return to default for Link(A).我想在单击时更改导航栏中的链接 (A) 颜色,并且如果我导航到另一个链接 (B) 颜色应返回链接 (A) 的默认值。

links.forEach( a=>{ //Its Color Changes But I Want All The Others To Be In Default Color 
    a.onclick = () => {
        a.classList.add("active");
    }
})
links.forEach(a=> {
    a.onclick = () => {
        links.forEach(a=>a.classList.remove('active'));
        a.classList.add("active");
    }
})

Add event to each element then on click on link perform add/remove of class.向每个元素添加事件,然后单击链接执行添加/删除类。

var navElements = document.querySelectorAll('a');
      //looping through each anchor element
      navElements.forEach(function(element){
           //adding click event on each anchor element
            element.addEventListener('click',function(e){
                 //stop default behaviour
                 e.preventDefault();
                 //select current active element
                 let active = document.querySelector('.selected');
                 active?.classList.remove('selected'); //remove class  
                 this.classList.add('selected'); //add class to current click element
      });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM