带锚的活动类导航侧边栏答案

【问题标题】：Active class navigation sidebar with anchors带锚的活动类导航侧边栏
【发布时间】：2020-06-18 00:05:03
【问题描述】：

我在一个 xsl 文档中有一个带有多个锚点的导航侧边栏。根据Adding active class for two anchor tags的建议，我尝试应用相同的脚本，但我不明白为什么没有根据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; }

提前感谢您的帮助。

【问题讨论】：

标签： javascript html css navigation sidebar

【解决方案1】：

首先，您在document.querySelectorAll("#menu-hermeneutics li > a") 处的代码意味着它将查询所有a 标签并添加类active 如果点击它，但您在下面的css，它是不同的。 #menu-hermeneutics > .active 表示它将选择 #menu-hermeneutics 的子级（这里是 li，而不是 a），类为 active，因为您使用的是 >。如果你只想在所有孩子a 上css，你可以这样做#menu-hermeneutics a.active 您可以查看here 了解更多详情。希望对您有所帮助

【讨论】：

感谢您的建议。至于a.active，在您的示例中，一旦我单击链接，.active 效果始终处于活动状态，而当我单击另一个链接时需要将其删除。无论如何，当我将您建议的脚本复制/粘贴到我的 xsl 文件时，它在处理 fiddle 时根本没有修改样式。
当我查看我的浏览器在线工具时，它还说存在以下错误：“SyntaxError: Unexpected token '&'。”但我怀疑错误来自这里......
现在可以了！ > 在 xsl 文件的脚本中自动变为 &gt 是一个问题。为了避免这个问题，我不得不将脚本保存在 .js 文件中。所以非常感谢@thienhuynh。我的另一个问题是在 .active 上，一旦用户单击此当前侧边栏菜单的另一个链接，就需要将其删除 - 为我最初问题的内容缺乏精确性而道歉。
欢迎您。您的新问题的想法是您只需要创建一个函数，当您将点击事件绑定到每个 a 时，该函数具有相同的想法，除了处理函数不同，在将 .active 添加到点击元素之前删除所有活动类。您可以使用 document.querySelectorAll("#menu-hermeneutics a.active") 并删除其中的所有类 .active

【解决方案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 的评论——这是避免错误的主要问题。

【讨论】：