网站面包屑出现然后立即消失 - 为什么？答案

【问题标题】：Website breadcrumbs appear then disappear immediately - why?网站面包屑出现然后立即消失 - 为什么？
【发布时间】：2021-12-14 22:39:18
【问题描述】：

我正在设计一个网页，因为我正在学习 Web 开发，并且我有一个项目要完成。

作为网站的一部分，我想将网页上的面包屑放入一个空的 div 中：

<div class="breadcrumbs" id="breadcrumbs"></div>

为此，我使用如下的 JavaScript 函数。当单击菜单项以加载新页面时，将提取当前页面名称。然后该函数检查 sessionStorage 以查看它是否包含任何内容 - 如果没有，它会保存当前页面名称并将其显示在面包屑 div 中；如果 sessionStorage 包含某些内容，则附加、保存和显示当前页面。

// When the user clicks a menu item
function saveCurrentPageName(){
  
  // Gets name of current page
  let path = window.location.pathname;
  let page = path.split("/").pop().replace(".html","");
  if (page == "index"){
    page = "home";
  }

  let trail = sessionStorage.getItem("savedpage");
  if (trail !== null){
    sessionStorage.setItem("savedpage", trail + " - " + page);
    document.getElementById("breadcrumbs").innerHTML = trail + " - " + page;
  }
  else {
    sessionStorage.setItem("savedpage", page);
    document.getElementById("breadcrumbs").innerHTML = page;
  }
};

我的问题是这样的，这很奇怪 - 当我加载网站并单击菜单项时，面包屑出现在正确的位置，但随后立即消失。显示的内容是正确的（简要地），但我不明白为什么它会消失。

元素的 CSS 是：

.breadcrumbs {
    grid-area: B;
    display: flex;
    background-color:  #132257;
    justify-content: left;
    padding-left: 19vw;
    align-items: center;
    font-size: 0.75em;
    font-style: italic;
    color: white;
}

我无法在此处显示视频，但这是一个屏幕截图，显示了面包屑路径在它立即消失之前：

如果有人能解释为什么会发生这种情况，我将不胜感激。在 JS 中，除了显示的访问 sessionStorage 的代码外，没有其他代码，并且在任何阶段都不会被清除。

【问题讨论】：

您的saveCurrentPageName() 函数是如何被调用的？菜单项是否链接到新页面？（当您单击菜单项时，它会将您重定向到新页面吗？）
你有没有使用开发工具来查看它是否真的不存在并且没有隐藏或移动或其他什么？
因此，该函数从每个菜单列表项的单击事件中调用： // 将 saveCurrentPageName 函数添加到每个项的单击事件 for (let i = 0; i
这就是不同之处——我在 DOMContentLoaded 事件中添加了一个事件侦听器，它运行良好...感谢 Conman_123

标签： javascript html css breadcrumbs

【解决方案1】：

因此，答案（大多数情况下）非常简单：

在每个菜单项的点击事件上存储相关的页面名称。

然后，当新页面加载时，调用由 DOMContentLoaded 事件处理的 Display 函数，一切正常！

第 1 步点击菜单项
第 2 步将页面名称保存到 sessionStorage
第 3 步新页面加载
加载完成后的第 4 步显示面包屑。

感谢 Conman_123 要求澄清并强调正确的方法。

【讨论】：