帶錨點的主動式 class 導航側邊欄

Question

我在 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; }

在此先感謝您的幫助。

Answer 1

首先，您在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你可以看看這里了解更多細節。 希望它會有所幫助

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');
    })
    }

注意：請參閱下面關於> vs &gt的評論——這是避免錯誤的主要問題。