HTML+JS实现导航栏激活态高亮功能异常，无法定位代码错误求助

核心问题排查 #

• 点击事件绑定范围错误：你当前的JS代码仅给已带有active类的导航链接绑定了点击事件，初始状态只有「Home」按钮有active类，其余导航链接点击时不会触发逻辑，无法切换高亮。
• 缺少jQuery依赖：代码使用了jQuery的$语法，但HTML中没有引入jQuery库，会触发$ is not defined报错，功能无法运行。
• CSS定位缺失：a.active::after设置了绝对定位，但父级a标签没有设置position: relative，会导致高亮下划线错位甚至不可见。

代码修正 #

JS部分修正 #

先引入jQuery依赖，再替换原有内嵌JS逻辑：

<!-- 引入jQuery，可下载到本地后改用本地路径引入 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="../static/java_file.js"></script>
<script>
$(document).ready(function() {
    // 给所有导航链接绑定点击事件
    $("nav ul li a").on("click", function(event) {
        event.preventDefault();
        // 移除所有导航链接的active类
        $("nav ul li a").removeClass("active");
        // 给当前点击的链接添加active类
        $(this).addClass("active");
    });
});
</script>

CSS部分修正 #

给导航链接增加相对定位配置：

nav ul li a {
    position: relative;
    /* 保留原有a标签的其他样式配置即可 */
}

nav ul li a.active::after {
    background: linear-gradient(90deg, grey 30%, #fff 0%, #fff 80%);
    content: "";
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -10px;
    box-shadow:  15px 0px 5px 2px rgba(0,255,255,1);
    clip-path: inset(-10px -0.5px -10px 2px);
}

内容的提问来源于stack exchange，提问作者Wyrden