HTML怎么做面包屑当前页_html面包屑当前页高亮禁点【小技巧】-html教程-PHP中文网

当前页节点不用标签包裹，改用或并添加aria-current="page"，配合css禁用指针与高亮样式；错误做法是保留空链接再用css隐藏，会破坏语义、可访问性及seo。

html怎么做面包屑当前页_html面包屑当前页高亮禁点【小技巧】

怎么让面包屑里当前页不带链接且高亮显示

直接结论：当前页节点不用 @#@#@#@#@#@#@#@#@#@0，然后靠 pointer-events: none 或 href="javascript:void(0)" 挡点击——这既不语义化，又可能被屏幕阅读器误读，还容易触发空链接跳转或焦点问题。

正确结构示例：

<nav aria-label="面包屑导航"><ol>
<li><a href="/">首页</a></li>
    <li><a href="/blog/">博客</a></li>
    <li><strong aria-current="page">HTML 面包屑</strong></li>
  </ol></nav>

aria-current="page" 是关键，它告诉辅助技术“这是当前页”，比纯视觉高亮更可靠
CSS 中用 ol li:last-child strong 或 [aria-current="page"] 单独控制字体加粗、颜色、禁用指针：
```
[aria-current="page"] {
  color: #333;
  font-weight: 600;
  pointer-events: none;
  cursor: default;
}
```

为什么不能只靠 CSS 隐藏当前页链接

有人试图保留 @#@#@#@#@#@#@#@#@#@1 / @#@#@#@#@#@#@#@#@#@2

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

正确写法：

const path = window.location.pathname.split("/").filter(p => p);
const crumbs = path.map((p, i) => {
  const href = "/" + path.slice(0, i + 1).join("/");
  return i === path.length - 1
    ? `<strong aria-current="page">${decodeURIComponent(p)}</strong>`
    : `<a href="https://www.php.cn/link/f011764aa39e28db078bf2d44bd5c81e">${decodeURIComponent(p)}</a>`;
});

整个 <nav></nav> 必须有 aria-label="面包屑导航"，否则 VoiceOver/NVDA 不会识别其用途

如果面包屑过长导致折行，用 white-space: nowrap 配合 overflow-x: auto 更稳妥，而不是强行缩字体

当前页节点的语义和交互状态，远不止“看起来高亮”这么简单。真正难的是在各种路由模式、多语言路径、SSR/CSR 混合场景下，保持 aria-current 始终准确，且不引入多余 DOM 节点或 tabIndex 干扰。

ol li:not(:last-child):after {
  content: "/";
  aria-hidden: true;
  margin: 0 0.5em;
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！