My xsl document contains a navigation sidebar with multiple anchors. I attempted to implement a script recommended in a Stack Overflow post, but the CSS style modification is not working as expected.
<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>
The included CSS code:
#menu-hermeneutics > .active {background-color: grey; color: white; font-weight: 700; margin-right: 100px; width: 200px; }
Your assistance in resolving this issue would be greatly appreciated. Thank you in advance.