当前页面焦点样式未使用 javascript 正确设置，出了什么问题答案

【问题标题】：current page focus style not set correctly with the javascript, what is wrong当前页面焦点样式未使用 javascript 正确设置，出了什么问题
【发布时间】：2021-08-07 05:29:50
【问题描述】：

我正在开展一个项目，其中 SVG 插图对于理解网站内容至关重要。

SVG 文件应该用作动画菜单，其中每个圆圈都是链接到另一个父页面的按钮。 SVG 文件作为原始代码插入到页面中。

我正在寻求帮助来解决这些问题：

当前页面或 SVG 文件中的相应圆圈未在 javascript 中以 :focus 模式下的圆圈的方式定义 - 获取带边框的样式
这个问题是因为“活动”项目/页面在 javascript 中没有正确确定，圆圈之间的线不是黑色样式
当用户位于其中一个子页面时，圆圈保持焦点模式（带有边框）

image of the result I'm looking for, looks likes this

下面的 sn-p 是来自我的测试站点的 href 链接。当 href 为 #0 并且我们不离开页面时，javascript 工作，但这不是此菜单的意图。

let allCircles = document.querySelectorAll("circle");
// Add an click handler to every circle that
// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
  element.addEventListener("click", clickHandler);
  element.addEventListener("mouseover", mouseoverHandler);
  element.addEventListener("mouseout", mouseoutHandler);
});

function clickHandler(evt) {
  // Clear current selection (remove class "active" from any circle)
  allCircles.forEach((circle) => circle.classList.remove("active"));
  // Mark clicked circle selected
  evt.target.classList.add("active");
  // Clear any currently highlighted lines
  clearHighlightedLines();
}


function mouseoverHandler(evt) {
  let activeCircle = document.querySelector("circle.active");
    document.querySelector("#pagetitle").innerHTML = evt.target.getAttribute('alt')

  let hoveredCircle = evt.target;
  if (activeCircle && (activeCircle != hoveredCircle)) {
    // Get the line that has classes matching both the actibve and hovered circle
    let line = document.querySelector("line." + activeCircle.id + "." + hoveredCircle.id);
    // Add the class "highlight" to that line
    if (line)
      line.classList.add("highlight");
  }
}

function mouseoutHandler(evt) {
  clearHighlightedLines();
}

function clearHighlightedLines() {
  // Find the line with class "highlight" (if any)
  var line = document.querySelector("line.highlight");
  // Remove the class "highlight"
  if (line)
    line.classList.remove("highlight");
}

:root {
        --color-1: #F2B705;
        --color-2: #C30F0E;
        --color-3: #264ABA;
        --color-4: #009CD2;
        --color-5: #E25727;

        
        --color-11: #C29204;
        --color-22: #990B0B;
        --color-33: #172E73;
        --color-44: #006B8E;
        --color-55: #BA4620;
  }
#c1 {
  fill: var(--color-1);
}
#c2 {
  fill: var(--color-2);
}
#c3 {
  fill: var(--color-3);
}

#c4 {
  fill: var(--color-4);
}

#c5 {
  fill: var(--color-5);
}
.cls-7 {
fill: none
    ;
}

#c1.act {
    stroke: red;
    stroke-width: 21.5;
}

#c1.active {
    stroke: var(--color-11);
    stroke-width: 21.5;
}
#c2.active {
    stroke: var(--color-22);
    stroke-width: 21.5;
}
#c3.active {
    stroke: var(--color-33);
    stroke-width: 21.5;
}
#c4.active {
    stroke: var(--color-44);
    stroke-width: 21.5;
}
#c5.active {
    stroke: var(--color-55);
    stroke-width: 21.5;
}
#c1.circle:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}
#c2.circle:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}
#c3.circle:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}
#c4.circle:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}
#c5.circle:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

circle.btn1:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}
circle.btn2:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}
circle.btn3:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}
circle.btn4:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}
circle.btn5:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

line {
  stroke: #c1c1c1;
  stroke-width: 22;
}

line.highlight {
  stroke: black;
}
.title {
  text-align: center;
}
#pagetitle {
    font-size: 4em;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 940 910">

   <defs>
    <style src="https://aau.gagarindigital.dk/wp-content/uploads/custom-css-js/svg-menu.css"></style>
    
  </defs>
       <polygon id="fem-kant" class="cls-7" points="456.29 7.49 898.87 329.05 729.82 849.33 182.76 849.33 13.71 329.05 456.29 7.49"/>

      <line class="c3 c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
      <line class="c2 c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
      <line class="c1 c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
      <line class="c1 c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
      <line class="c5 c2" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
      <line class="c1 c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
      <line class="c2 c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
      <line class="c3 c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
      <line class="c4 c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>
      <line class="c5 c1" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>

<a href="https://aau.gagarindigital.dk/trans-disciplinary">
  <circle id="c1" class="btn1 btn" href="/trans-disciplinary" alt="Trans-disciplinary" cx="455.9" cy="133.5" r="133" data-Name="Trans-disciplinary" data-tabindex="1" />
</a>
<a href="https://aau.gagarindigital.dk/data-democracy">
<circle id="c2" class="btn2 btn" href="/data-democracy" alt="Data Democracy" cx="779.33" cy="368.43" r="133" data-Name="Data Democracy" data-tabindex="2" />
</a>
<a href="https://aau.gagarindigital.dk/cryptography-and-math">
<circle id="c3" class="btn3 btn" href="/cryptography-and-math" alt="Cryptography and Math" cx="656.32" cy="748.57" r="133" data-Name="Cryptography and Math" data-tabindex="3" />
</a>
<a href="https://aau.gagarindigital.dk/translation">
<circle id="c4" class="btn4 btn" href="/translation" alt="Translation" cx="256.18" cy="748.57" r="133" data-Name="Translation" data-tabindex="4" />
</a>
<a href="https://aau.gagarindigital.dk/application">
<circle id="c5" class="btn5 btn" href="/application" alt="Application" cx="133.5" cy="368.62" r="133" data-Name="Application" data-tabindex="5" />
</a>
 <script type="text/javascript" src="https://aau.gagarindigital.dk/wp-content/uploads/custom-css-js/svg-menu.js"></script>

    </svg>
<div class="title">
    <p id="pagetitle"> </p>
</div>

【问题讨论】：

你的问题我还是不太清楚。我可以假设所有六个页面（主页面 + 5 个子页面）上都有相同的 SVG，并且您想知道如何让子页面上的 SVG 在加载时显示正确的状态吗？
是的，没错。并且第 3 级（+4、5 等）子页面也显示了第 1 级页面的状态（如 www.123.com/**aaa(bold)**/bbb/ccc/ddd）。我希望这能说清楚，否则请询问。
当页面加载时，您需要根据您所在的页面初始化 SVG 状态。子页面显然知道它们是哪一个。或者，您可以通过将所选项目存储在sessionStorage 中来使其自动运行。然后当页面加载时，检索该值并用它初始化菜单。
我不是特别习惯于使用 Javascript 工作，也没有学过它。我读了你的消息，因为有两种可能的方法。虽然我试图用谷歌搜索第一个替代方案，但我没有看到任何在这种情况下有意义的东西。相反，我认为（直觉上？）sessionStorage 似乎是一个解决方案，但可能没有完整的概述。您认为最好的解决方案是什么？

标签： javascript svg

【解决方案1】：

如下修改你的代码，它应该可以工作（如果我没有搞砸任何东西的话）。

将clickHandler()改成如下：

function clickHandler(evt) {
  // Activate the circle
  activateCircle(evt.target.id);
  // Remember which one was clicked, so that we can
  // highlight the right one when we get to the subpage
  sessionStorage.setItem("selectedMenuId", evt.target.id);
}

function activateCircle(elementId)
{
  // Clear current selection (remove class "active" from any circle)
  allCircles.forEach((circle) => circle.classList.remove("active"));
  // Mark clicked circle selected
  document.getElementById(elementId).classList.add("active");
  // Clear any currently highlighted lines
  clearHighlightedLines();
}

并且在子菜单页面仅，包含这个额外的一点点 JS。

//--- Initialise the menu -------------------------------------------
// Include this section on the subpages only!
document.querySelector("svg").addEventListener("load", () => {
  // Get the id of the menu item that was selected on the last page
  var activeId = sessionStorage.getItem("selectedMenuId");
  // Activate that circle
  if (activeId)
    activateCircle(activeId);
});

【讨论】：

感谢您的意见。它现在不工作。活跃的，我只需要清除它并正确执行：“初始化菜单”JS - 假设是原样，还是假设是主要JS 的一部分？目前，我正在将我所有的 JS 加载到正文的末尾——“初始化菜单”JS 也是如此吗？如果你想看的话，整个 shebang 都不起作用here。
* 假设是原样，还是假设是主JS的一部分？” 没关系，只要在子页面上运行即可。至于为什么要测试网站不工作：有点难以分辨，因为它全是黑色的。似乎 SVG 的 CSS 没有加载。
抱歉，我在测试后忘记激活 CSS - 它现在已开启。
可能发生的情况是<a> 元素的默认处理是阻止执行单击操作。尝试删除 <a> 元素，然后通过 JS 重定向到您的新页面。使用window.location = whatever 重定向。
好的。这 5 个圈子现在有一个 onclick ala onclick="goDatademocracy()"，每个圈子都有一个 JS function goDatademocracy() { location.href = "https://aau.gagarindigital.dk/data-democracy"; }。链接正常，但 .active 类仍未添加。