当前页面焦点样式未使用 javascript 正确设置，有什么问题 [英] current page focus style not set correctly with the javascript, what is wrong

问题描述

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

I'm working on a project where an SVG illustration is essential for the understanding of the content of the website.

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

The SVG file is supposed to be working as an animated menu, where each circle is a button linking to another parent page. The SVG file is inserted on the page as raw code.

我正在寻求帮助以解决这些问题:

I'm seeking help to solve these issues:

1. 当前页面，或者SVG文件中对应的圆，在javascript中没有像:focus模式下的圆那样定义——获取带边框的样式
2. 这个问题是因为javascript中没有正确确定活动"项目/页面，圆圈之间的线条不是黑色的
3. 当用户在其中一个子页面上时，圆圈保持焦点模式(带有边框样式)

1. The current page, or the corresponding circle in the SVG file, is not defined in javascript in a way that the circle in :focus mode - gets the style with a border
2. this problem is because the "active" item/page is not determined correctly in javascript, the line between the circles are not style black
3. The circle stays in focus mode (styled with a border) when the user is on one of the child-pages

我正在寻找的结果图像，看起来像这样

下面的代码片段带有来自我的测试站点的 href 链接.当 href 为 #0 并且我们不离开页面时，javascript 工作，但这不是此菜单的意图.

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

推荐答案

修改你的代码如下，它应该可以工作(如果我没有搞砸任何事情).

Modify your code as below, and it should work (if I haven't messed anything up).

更改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.

And on the submenu pages only, include this extra little bit of 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);
});

这篇关于当前页面焦点样式未使用 javascript 正确设置，有什么问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！