title: Active class navigation sidebar with anchors
body: <p>I have a navigation sidebar with several anchors in an xsl document. Based on <a href="https://stackoverflow.com/questions/49507045/adding-active-class-for-two-anchor-tags">Adding active class for two anchor tags</a> suggestions, I have tried to apply the same script, but I don't see why there is no modification of the style according to CSS.</p>
  
  <pre><code>&lt;script&gt;
       &lt;![CDATA[
         document.querySelectorAll("#menu-hermeneutics li &gt; a").forEach(a =&gt; {
            a.addEventListener("click", () =&gt; {
                a.addClass('active'); 
            });
         });]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <pre><code>&lt;ul id="menu-hermeneutics"&gt;
      &lt;li&gt;&lt;a href="#general-overview"&gt;General Overview&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#context-overview"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#result-overview"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#clanA"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#aff-clanA"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#clanB"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#aff-clanB"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#DR"&gt;...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#clanUNK"&gt;...&lt;/a&gt;&lt;/li&gt;                
  &lt;/ul&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#menu-hermeneutics &gt; .active {background-color: grey; color: white; font-weight: 700; margin-right: 100px; width: 200px; }
  </code></pre>
  
  <p>In advance, thanks for your kind help.</p>