Javascript 单击后如何保持链接悬停动画？

我试图在单击后保持链接悬停效果。这就是我目前拥有的：

HTML:

CSS:

.link{
颜色：var（--德古拉粉）；
填充物：5px 5px 5px；
保证金权利：5 REM；
文字装饰：无；
字号：1.2rem；
文本转换：大写；
文本阴影：0 2px 3px rgba（0,0,0,0.4），0 8px 13px rgba（0,0,0,0.1），0 18px 23px rgba（0,0,0.1）；
}
.link:悬停{
背景重复：重复-x；
背景位置：左0%底部-5%；
背景图像：线性梯度（90度，rgba（139233253,1）0%，rgba（189147249,1）50%，rgba（80250123,1）100%）；
背景大小：100%18%；
过渡：在0.2s内缓解；
}
.link.is-active{
背景重复：重复-x；
背景位置：左0%底部-5%；
背景图像：线性梯度（90度，rgba（139233253,1）0%，rgba（189147249,1）50%，rgba（80250123,1）100%）；
背景大小：100%18%；
}

JS:

const link=document.querySelector（“.link”）；
link.addEventListener（“单击”，toggleActive）；
函数toggleActive（）{
link.classList.toggle（“处于活动状态”）；
};

---

我知道我必须添加一些东西来消除上一个链接的影响，但在我想到的每一个变化之后，我甚至无法删除这部分内容。

您使用的是

el.querySelector（）

，它将只返回找到的第一个匹配元素。您需要获取元素选择器的整个节点列表，使用

el.queryselectoral（）

然后通过循环运行节点列表，并将函数放置在eventListener中。由于您希望删除活动类，因此有多种方法可以做到这一点。我只需使用el.forEach循环将其从所有元素中删除，然后在函数中设置事件的

event.target

上的classList

您可以使用一个条件来检查哪个元素具有活动类，然后在单击时切换/删除它，但这在您的函数中需要更多的代码

编辑：OP希望在href将链接发送到另一页后，确定在该页上按下了哪个链接。在这种情况下，不需要JS，只需在该HTML页面中的相应页面按钮中静态设置该类

如果你真的想使用JS，你可以在每页的body标签上添加一个

id

，即在contact页面-->

上，该页面对应于每个导航页面链接按钮的textContact。然后使用JS，去掉eventListener，只需查找

body.id

，如果它等于节点列表上循环中的

link.textContent

，则设置活动类

links.forEach(link => document.body.id === link.textContent ? link.classList.add("is-active") : null)

用户在

About.html

^^^^^^^^^^^^^^^^^^^^^

以下是原问题的答案：

/-->您需要获取节点列表中的所有元素
//-->使用class.link-->querySelectorAll（）命令
const links=document.queryselectoral（“.link”）；
//-->循环这些元素并添加eventListener
links.forEach（link=>document.body.id==link.textContent？link.classList.add（“处于活动状态”）：null）

.link{
颜色：var（--德古拉粉）；
填充物：5px 5px 5px；
保证金权利：5 REM；
文字装饰：无；
字号：1.2rem；
文本转换：大写；
文本阴影：0 2px 3px rgba（0,0,0,0.4），0 8px 13px rgba（0,0,0,0.1），0 18px 23px rgba（0,0,0.1）；
}
.link:悬停{
背景重复：重复-x；
背景位置：左0%底部-5%；
背景图像：线性梯度（90度，rgba（139233253,1）0%，rgba（189147249,1）50%，rgba（80250123,1）100%）；
背景大小：100%18%；
过渡：在0.2s内缓解；
}
.link.is-active{
背景重复：重复-x；
背景位置：左0%底部-5%；
背景图像：线性梯度（90度，rgba（139233253,1）0%，rgba（189147249,1）50%，rgba（80250123,1）100%）；
背景大小：100%18%；
}

我认为上面的人误解了这个要求

首先，这是一个菜单挖掘，当你点击链接时，页面上会有一个重定向

然后，您必须找出当前所在的站点/页面，然后在菜单中选择当前链接

一定要问你是否有什么不明白的地方

这是我的解决办法

//这应该在母版页alt all page上
const link=document.queryselectoral（“.nav desktop.link”）；
var href=window.location.href；
link.forEach（x=>{
//现在查看页面的href，将其与菜单进行比较，然后选择当前（右）链接
如果（！href | | href==“”| | href==“/”）
{
//如果为空，则选择第一个，例如default index.html
如果（x.getAttribute（“href”）=“index.html”）
x、 添加（“处于活动状态”）；
}else if（href.toLowerCase（）.indexOf（x.getAttribute（“href”）.toLowerCase（））！=-1）
x、 添加（“处于活动状态”）；
});
.link{
颜色：var（--德古拉粉）；
填充物：5px 5px 5px；
保证金权利：5 REM；
文字装饰：无；
字号：1.2rem；
文本转换：大写；
文本阴影：0 2px 3px rgba（0,0,0,0.4），0 8px 13px rgba（0,0,0，