下划线指示器需用独立元素+transform+transition实现平滑移动，核心是通过getBoundingClientRect()动态读取激活标签位置并用requestAnimationFrame确保重排后更新，配合resize/fontload兜底，封装updateTabIndicator统一处理所有变更场景。
直接用 scroll-behavior: smooth + scrollIntoView() 配合 CSS 自定义下划线动画，就能做出丝滑、可响应、不卡顿的滑动标签页指示器。纯 CSS 方案（如 transform + transition）更轻量，但必须手动同步下划线位置；JS 控制更灵活，但容易因节流不当导致偏移错位。
下划线如何跟随激活标签平滑移动
核心是让一条独立的 <div class="indicator"> 元素始终对齐当前选中标签的底部，并通过 <code>transform: translateX() + transition 实现位移动画。不能靠 left/width 硬设，否则缩放、字体加载、Flex 换行都会导致计算失准。
- 标签栏用
display: flex，每个标签设flex-shrink: 0防止压缩 - 下划线容器需与标签栏同宽，
position: relative；下划线自身设position: absolute; bottom: 0; height: 2px; width: 100%; transition: transform 0.3s ease, width 0.3s ease - 每次切换时，用
getBoundingClientRect()动态读取当前激活标签的位置，再设置indicator.style.transform = `translateX(${offsetLeft}px)`和indicator.style.width = `${offsetWidth}px` - 避免在
resize或fontload后漏掉重算——加个setTimeout(() => updateIndicator(), 0)可兜底
点击标签后下划线跳变或错位的常见原因
这不是样式问题，而是 DOM 时机或尺寸读取错误。最常踩的坑是：在标签 click 回调里立刻读 offsetLeft，但此时新类名刚加上，浏览器还没重排（reflow），返回的仍是旧尺寸。
- 务必用
requestAnimationFrame(() => { /* 读尺寸 + 更新 indicator */ })包裹尺寸读取逻辑 - 如果用了
classList.toggle切换激活态，确保只在一个地方维护状态（比如统一用data-active="true"），避免多处判断不一致 - 移动端点击有 300ms 延迟？禁用
touch-action: manipulation并监听touchend替代click - 使用
getBoundingClientRect()而非offsetLeft/offsetWidth，它不受父级transform或scale影响，更可靠
如何支持标签数量动态增减后的指示器自动适配
动态添加/删除标签时，下划线不会自动“感知”，必须显式触发一次重定位。关键不是监听 DOM 变化，而是把更新逻辑抽成可复用函数，在所有变更出口调用。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 封装一个
updateTabIndicator()函数，内部统一处理：找当前激活项 → 获取其getBoundingClientRect()→ 设置 indicator 的transform和width - 新增标签后，若默认激活它，立即调用
updateTabIndicator()；若保持原激活项，也调用——因为整体宽度变了，原位置可能已偏移 - 不要依赖
MutationObserver监听 DOM 变更来自动更新，开销大且易漏掉样式重绘场景（比如某标签文字从“首页”变成“首页（新）”，宽度变了但 DOM 没变） - 为防极端情况（如标签内容异步加载完成），可在
window.addEventListener('resize', updateTabIndicator)和document.fonts.ready.then(updateTabIndicator)中也加入兜底调用
真正难的不是让下划线动起来，而是让它在字体加载、窗口缩放、标签增删、触摸延迟、高DPI屏幕等所有真实场景下，都稳稳停在该在的位置——这需要把“读尺寸”和“写样式”严格拆开，并用 requestAnimationFrame 锚定在浏览器重排之后。
