使用is-active类结合CSS与JS逻辑实现导航高亮，通过为当前页菜单项添加.is-active并自定义样式如文字变色加粗，再用脚本自动匹配URL路径高亮对应链接，适用于各类Foundation导航结构。
在使用Foundation框架构建响应式网站时，实现导航文字高亮的关键是将自定义CSS类与Foundation的结构规范结合，特别是利用.active类来标识当前页面对应的菜单项。
Foundation默认为多种导航组件（如Top Bar、Menu等）提供语义化结构。以常见的水平菜单为例，通常使用<ul class="menu"></ul>包裹导航项：
要实现高亮，需手动或通过后端/前端逻辑为当前页面对应的<li>添加class="is-active"（注意：Foundation 6+ 推荐使用is-active而非active）。
Foundation本身对is-active有基础样式支持，但通常需要自定义增强视觉效果。例如让当前页导航文字变红并加粗：
立即学习“前端免费学习笔记（深入）”；
确保当前链接的父级li包含is-active类：
静态页面可通过手动添加类实现高亮；多页面项目可借助JavaScript自动匹配URL与链接路径：
<script> document.addEventListener('DOMContentLoaded', function() { const currentPath = <a style="color:#f60; text-decoration:underline;" title= "win"href="https://www.php.cn/zt/19041.html" target="_blank">window.location.pathname.split('/').pop() || 'https://www.php.cn/link/7812d18c11eba4daf3953e61cffd4028'; const navLinks = document.querySelectorAll('.menu a'); navLinks.forEach(link => { if (link.getAttribute('href') === currentPath) { link.parentElement.classList.add('is-active'); } }); }); </script>该脚本在页面加载后比较链接地址与当前路径，自动为匹配项的父元素添加is-active类。
若使用下拉菜单或响应式导航，保持高亮逻辑一致。例如在垂直侧边栏或折叠菜单中，同样应用is-active类，并确保CSS选择器覆盖这些结构：
Foundation的JavaScript组件（如Drilldown、Accordion Menu）也会自动处理子菜单的激活状态，配合is-active可实现完整高亮体验。
基本上就这些。关键是统一使用is-active类，结合CSS定制样式，并通过逻辑判断自动添加类名，就能在各种导航结构中稳定实现文字高亮。不复杂但容易忽略细节。
以上就是CSS框架Foundation如何实现导航文字高亮_Foundation类与active状态结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
587
收藏
