UIkit导航菜单点击后无法高亮当前项怎么办？

Good“世英提问于 2026-03-24 12:21:20 阅读 15

组件

我在用 UIkit 做一个单页应用的侧边导航，想让点击的菜单项自动加上 active 状态，但试了几次都没成功。官方文档说会自动处理，但我动态生成的 nav 好像没这效果。

我尝试在点击时手动加 class，但每次刷新或切换路由后又没了。下面是我现在用的 JS 逻辑：

document.querySelectorAll('.uk-nav li a').forEach(link => {
  link.addEventListener('click', () => {
    document.querySelectorAll('.uk-nav li a').forEach(el => el.classList.remove('uk-active'));
    link.classList.add('uk-active');
  });
});

是不是哪里没考虑到？或者 UIkit 有更合适的 API 来处理这个？

我来解答赞 3 收藏

反馈

1 条解答

天瑞 Dev Lv1

这个问题听起来像是动态生成的菜单导致的，每次页面刷新或者路由变化，状态就没了。你手动添加 class 的方式是对的，但是得考虑一下如何持久化这个状态。你可以试试在路由变化的时候，通过 URL 或者某种标识符来确定当前激活的菜单项，然后在页面加载完成后重新设置 active 状态。

你可以在主题里加个脚本，利用 JavaScript 监听路由变化，并且根据当前 URL 设置 active。这里有一个简单的示例：

pre class="pure-highlightjs line-numbers">

document.addEventListener('DOMContentLoaded', function() {

    // 获取当前 URL 的路径部分

    var currentPath = window.location.pathname;



    // 遍历所有导航链接

    document.querySelectorAll('.uk-nav li a').forEach(function(link) {

        // 检查链接的 href 是否匹配当前路径

        if (link.getAttribute('href') === currentPath) {

            // 移除所有链接的 active 类

            document.querySelectorAll('.uk-nav li a').forEach(function(el) {

                el.classList.remove('uk-active');

            });



            // 添加 active 类到匹配的链接

            link.classList.add('uk-active');

        }

    });

});

这段代码会在页面加载完成后执行，根据当前页面的 URL 设置相应的菜单项为 active。这样即使刷新或者路由变化，也能保持正确的激活状态。希望这个能解决你的问题，折腾了一下午终于找到了出路吧。

2026-03-24 13:00