1. 基本概念
在Foundation框架中，导航的高亮显示通常通过设置当前活动项的状态来实现。状态管理决定了哪一个菜单项显示为“活跃”，从而帮助用户理解当前位置。常用的 Foundation 类名包括 is-active、active 等，用于标记当前项。为了提升无障碍性，可以在高亮项使用 aria-current="page" 属性。
本文围绕“Foundation导航文字高亮实现指南：如何将Foundation类与active状态结合使用”展开，帮助开发者快速落地高亮效果。
通过将 Foundation 提供的样式与自定义的状态类结合，可以实现“文字高亮”效果。文字颜色、下划线或背景色的变化，是用户对当前导航项最直观的反馈。
2. 结合 active 状态的实现要点
要点包括：结构清晰、样式可覆盖Foundation默认样式、以及通过脚本动态同步当前页。在不破坏 Foundation 的默认行为前提下，加入一个额外的“active”标识，可以实现跨组件的一致高亮。
2.1 结构设计
建议将导航项放在一个容器内，例如 ul.menu 或 nav.top-bar，并在当前项的 li、a 上附加 is-active 或 active 类。
如果使用路由的前端框架，也可以在路由切换时自动给当前项添加该类，以确保状态同步。自动化同步是提高可维护性的关键。
3. 代码实现示例
3.1 HTML 结构
下面的示例展示了一个 Foundation 风格的顶部导航，当前页通过 is-active 类标记。无障碍属性也被包含进来，以提升可访问性。
<nav class="top-bar" aria-label="Main Navigation"><ul class="menu vertical medium-horizontal" role="menubar"><li role="none" class="is-active"><a href="/home" role="menuitem" aria-current="page">首页</a></li><li role="none"><a href="/features" role="menuitem">特性</a></li><li role="none"><a href="/pricing" role="menuitem">价格</a></li></ul>
</nav>
3.2 CSS 样式
为了实现文字高亮，可以覆盖 Foundation 的默认样式，在当前项上应用清晰的对比色与强调效果。优先级要高于基础样式，确保在“活动”状态下文字可清晰辨识。
/* Foundation 结构中的高亮样式 */
.top-bar .menu > li.is-active > a,
.top-bar .menu > li.active > a {color: #0a7cff; /* 文字颜色高亮 */font-weight: 700; /* 字体加粗 */text-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.top-bar .menu > li.is-active > a {border-bottom: 2px solid #0a7cff; /* 下划线提示当前项 */
}
3.3 JavaScript 逻辑
如果需要基于当前 URL 动态切换活动项，可以使用简单的脚本来自动应用 is-active。这在页面级路由或单页应用中尤其有用。自动发现并标记当前项，能减少手动维护的工作量。
document.addEventListener('DOMContentLoaded', function() {const currentPath = location.pathname.replace(/\/$/, '');document.querySelectorAll('.top-bar .menu a').forEach(a => {const itemPath = a.getAttribute('href').replace(/\/$/, '');if (itemPath === currentPath) {a.parentElement.classList.add('is-active');a.setAttribute('aria-current', 'page');}});
});
4. 在 Foundation 组件中的应用场景
4.1 Top Bar 的高亮实现
在 Top Bar 组件中，使用 is-active 标记当前项，并通过 CSS 提供清晰的文字高亮。兼容性目标是确保桌面和移动端都可用，且高对比度容易被感知。
对于下拉菜单或子菜单，可以将 is-active 应用于相应的父级 li，并在子项中使用同样的样式策略，确保层级之间的一致性。一致性是提升 SEO 的一个非直接因素，但对用户体验的增强会间接影响跳出率。
5. 兼容性与无障碍
5.1 无障碍实践
将 aria-current 设置为 page，让屏幕阅读器知道当前页面。键盘导航也应该能够通过 Tab 键顺序聚焦，并且激活状态能够被清晰读出。
使用 Foundation 的基础类 + 自定义高亮可以同时满足审美与可用性需求。语义化的类名与状态是实现高可维护性的关键。
