带有锚点的活动类导航侧边栏

Question

我有一个导航侧边栏，在xsl文档中有几个锚点。根据为两个锚标签添加活动类的建议，我尝试应用相同的脚本，但我不明白为什么没有根据 CSS 修改样式。

<script>
<![CDATA[
document.querySelectorAll("#menu-hermeneutics li > a").forEach(a => {
a.addEventListener("click", () => {
a.addClass('active'); 
});
});]]>
</script>

<ul id="menu-hermeneutics">
<li><a href="#general-overview">General Overview</a></li>
<li><a href="#context-overview">...</a></li>
<li><a href="#result-overview">...</a></li>
<li><a href="#clanA">...</a></li>
<li><a href="#aff-clanA">...</a></li>
<li><a href="#clanB">...</a></li>
<li><a href="#aff-clanB">...</a></li>
<li><a href="#DR">...</a></li>
<li><a href="#clanUNK">...</a></li>                
</ul>

和 CSS：

#menu-hermeneutics > .active {background-color: grey; color: white; font-weight: 700; margin-right: 100px; width: 200px; }

提前感谢您的帮助。

Answer 1

首先，你在document.querySelectorAll("#menu-hermeneutics li > a")的代码意味着它将查询所有a标签并添加类active如果点击它，但你下面的 css 是不同的。#menu-hermeneutics > .active意味着它将选择#menu-hermeneutics的子项(这里是li，而不是a(与类active，因为你正在使用>。如果您只想对所有孩子进行 cssa，您可以#menu-hermeneutics a.active执行此操作 您可以查看此处以获取更多详细信息。希望会有所帮助

Answer 2

感谢@ThienHuynh和同事的建议，这是正确的代码：

var links = document.querySelectorAll("#menu-hermeneutics li a");
for (const link of links) {
link.addEventListener("click", (e) => {
var target = e.target;
links.forEach(function(currentLink) {
currentLink.classList.remove('active');
});
// if target already had .active. remove it. Otherwise, add it
target.classList.toggle('active');
})
}

注意：请参阅下面我关于>与&gt的评论 - 这是避免错误的主要问题。