Javascript 我试图使用vanilla JS突出显示单击的锚，并删除先前突出显示的锚

这是我的第一篇文章，我还不知道我在做什么，所以请耐心听我说

我试图使用vanilla JS突出显示单击的锚，并删除先前突出显示的锚

我不知道为什么它不起作用，但我在这方面是新手

下面就是JS。导航链接是链接类。active是应在单击后对其进行操作的类

window.onload = afterClick;


function afterClick(){
 //set an on off array to toggle. 
  let linkClass = document.querySelectorAll(".nav-link");
  
  linkClass.forEach(link => link.addEventListener("click", function(){
  if (link.classList.contains("active")) {
    link.classList.remove("active");  
  link.classList.add("active");
  }}));  
}

---

谢谢大家!

而不是

onload

您可以通过收听

hashchange

事件来实现如下目的：

window.addEventListener("hashchange", () => {
  let hash = window.location.hash;
  if (hash) {
    let linkClass = document.querySelectorAll(".nav-link");
    linkClass.forEach(x => x.classList.remove("active"))
    document.querySelector('a[href="' + hash + '"]').classList.add("active");
  }
});

因此，每当url哈希改变时，它都会使用以下方法从所有链接中删除

活动的
类：

linkClass.forEach(x => x.classList.remove("active"))

然后，它将搜索具有该
哈希值的链接，并仅使用以下命令将
活动类添加到该链接：

document.querySelector('a[href="' + hash + '"]').classList.add("active");

工作演示：


window.addEventListener（“hashchange”，（）=>{
让hash=window.location.hash；
if（散列）{
让linkClass=document.queryselectoral（“.nav-link”）；
linkClass.forEach（x=>x.classList.remove（“活动”））
document.querySelector（'a[href=“”+哈希+“]”]）.classList.add（“活动”）；
}
});
#主文档{字体系列：蒙特塞拉特，无衬线}导航栏{浮动：左；位置：固定；字体系列：蒙特塞拉特，无衬线；字体重量：700；最小宽度：230px；最大宽度：231px；高度：100vh；背景：url(https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg)页边距顶部：-10px；页边距左侧：-10px；页边距右侧：40px；页边距底部：25px；边框：1px实心#000#导航栏标题{填充：14px；字体大小：1.8em；文本对齐：中心；边框：1px实心#000#导航栏a{显示：块；颜色：000；文本装饰：无；填充：15px；字体大小：1.1em；文本对齐：中心；边框：1px实心#标题#0；主节}{左边距：30px；字体系列：显著，无衬线；字体大小：1.4rem}。主节ul li{列表样式类型：无；字体大小：1.3em；填充底部：6px}。主节{左边距：230px；右边距：50px；填充顶部：20px}主文档{填充底部：60px}代码{字体大小：1rem 1；字体系列：蒙特塞拉特，无衬线}。激活{颜色：橙色！重要；背景色：#00f！重要}@仅媒体屏幕和（最大宽度：425px）{导航栏{最大宽度：425px；最小宽度：200px；位置：相对；宽度：100vw；高度：自动}。导航链接{页边距顶部：0；宽度：100vw}。主节{页边距左侧：5px；页边距右侧：10px；填充顶部：20px}。主节ul{填充左侧：5px}。导航栏填充代码{

@导入url（'https://fonts.googleapis.com/css2?family=Montserrat&family=Notable&display=swap');
@导入url（'https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'）；
普通鲨鱼
关于鲨鱼


在我们谈论世界上最致命的鲨鱼之前，有几个有趣的事实可以帮助你更好地理解鲨鱼这个物种



鲨鱼没有骨头
鲨鱼用鳃过滤水中的氧气。它们是一种特殊的鱼类，被称为“弹性鳃亚纲”，也就是说：
由软骨组织构成的鱼——你的耳朵和鼻尖由透明的软骨构成。这
这一类还包括鳐鱼、锯鱼和溜冰鞋。它们的软骨骨骼比真骨轻得多，它们的大肝脏充满了低密度的油，这两者都有助于它们的浮力

尽管鲨鱼没有骨骼，但它们仍然可以石化。随着大多数鲨鱼年龄的增长，它们会在骨骼软骨中沉积钙盐以加强骨骼软骨。鲨鱼干燥的下颚看起来很重，感觉很结实；很像骨骼。这些矿物质
让大多数鲨鱼骨骼系统很好地石化。牙齿有珐琅质，所以它们也出现在化石记录中



大多数鲨鱼的视力都很好
大多数鲨鱼在光线较暗的地方都能看得很清楚，拥有梦幻般的夜视能力，还能看到颜色。鲨鱼眼球的背面有一层被称为绒毡层的反光组织。这有助于鲨鱼在光线很弱的情况下看得非常清楚




鲨鱼有特殊的电受体器官
鲨鱼的鼻子、眼睛和嘴巴附近都有小黑点。这些黑点是洛伦兹尼壶腹——一种特殊的电受体器官，让鲨鱼能够感知海洋中的电磁场和温度变化



鲨鱼皮摸起来像砂纸
鲨鱼的皮肤摸起来就像砂纸，因为它是由称为板状鳞片（也称为真皮小齿）的微小牙齿状结构组成的。这些鳞片指向尾巴，有助于减少鲨鱼活动时周围水的摩擦
游泳。



鲨鱼会进入恍惚状态
当你把鲨鱼翻转过来时，它们会进入一种恍惚状态，称为“紧张不动”。这就是为什么我们的科学家在水中研究锯鱼时，你经常看到锯鱼翻转过来的原因



鲨鱼已经存在很长时间了
根据在澳大利亚和美国发现的化石鳞片，科学家们推测鲨鱼最早出现在大约4.55亿年前的海洋中



科学家们通过计算鲨鱼脊椎上的环来确定鲨鱼的年龄
脊椎动物包含一对同心的不透明和半透明带。带对像树上的环一样计数，然后科学家根据计数为鲨鱼指定年龄。因此，如果脊椎动物有10对带对，则假定它是10岁。然而，最近的研究表明，这一假设并不总是正确的因此，研究人员必须研究每个物种和大小等级，以确定带对沉积的频率，因为沉积速率可能随时间而变化。确定带沉积的实际速率称为验证。
<
if (link.classList.contains("active")) {
    link.classList.remove("active");  
  link.classList.add("active");
  }

window.onload = afterClick;

function afterClick() {
    let linkClass = document.querySelectorAll(".nav-link");
    // Add eventListener
    linkClass.forEach((originalLink) =>
        originalLink.addEventListener("click", function () {
            let linkElems = document.querySelectorAll(".nav-link");
            // Clear "active class from the same links"
            linkElems.forEach((linkElem)=>{
                if (linkElem.classList.contains("active")) {
                    linkElem.classList.remove("active");
                }
            });
            //add the |"active" class to the originally clicked elem
            originalLink.classList.add("active");    
        })
    );
}