[英]Active class navigation sidebar with anchors
我在 xsl 文档中有一个带有多个锚点的导航侧边栏。 基于为两个锚标签建议添加活动 class ,我尝试应用相同的脚本,但我不明白为什么没有根据 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; }
在此先感谢您的帮助。
首先,您在document.querySelectorAll("#menu-hermeneutics li > a")
处a
代码意味着它将查询所有标签并在单击它时添加 class active
,但您的 css 下面是不同的。 #menu-hermeneutics >.active
意味着它将 select #menu-hermeneutics
的孩子(这里是li
,不是a
)与 class active
,因为你正在使用>
。 如果你想 css 在所有的孩子a
,你可以这样做#menu-hermeneutics a.active
你可以看看这里了解更多细节。 希望它会有所帮助
感谢@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');
})
}
注意:请参阅下面关于>
vs >
的评论——这是避免错误的主要问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.