使用is-active类结合CSS与JS逻辑实现导航高亮，通过为当前页菜单项添加.is-active并自定义样式如文字变色加粗，再用脚本自动匹配URL路径高亮对应链接，适用于各类Foundation导航结构。
在使用Foundation框架构建响应式网站时，实现导航文字高亮的关键是将自定义CSS类与Foundation的结构规范结合，特别是利用.active类来标识当前页面对应的菜单项。
理解Foundation导航结构
Foundation默认为多种导航组件（如Top Bar、Menu等）提供语义化结构。以常见的水平菜单为例，通常使用包裹导航项：
要实现高亮，需手动或通过后端/前端逻辑为当前页面对应的添加class="is-active"（注意：Foundation 6+ 推荐使用is-active而非active）。
使用is-active类触发样式
Foundation本身对is-active有基础样式支持，但通常需要自定义增强视觉效果。例如让当前页导航文字变红并加粗：
立即学习“前端免费学习笔记（深入）”；
确保当前链接的父级li包含is-active类：
动态添加is-active类的方法
静态页面可通过手动添加类实现高亮；多页面项目可借助JavaScript自动匹配URL与链接路径：
该脚本在页面加载后比较链接地址与当前路径，自动为匹配项的父元素添加is-active类。
移动端与下拉菜单中的高亮处理
若使用下拉菜单或响应式导航，保持高亮逻辑一致。例如在垂直侧边栏或折叠菜单中，同样应用is-active类，并确保CSS选择器覆盖这些结构：
Foundation的JavaScript组件（如Drilldown、Accordion Menu）也会自动处理子菜单的激活状态，配合is-active可实现完整高亮体验。
基本上就这些。关键是统一使用is-active类，结合CSS定制样式，并通过逻辑判断自动添加类名，就能在各种导航结构中稳定实现文字高亮。不复杂但容易忽略细节。
