如何用JavaScript+CSS实现页面导航链接的font-weight激活效果

嘿，我来帮你搞定这个问题！要实现「当前页面对应的导航链接字体加粗」的效果，我们可以通过JavaScript检测当前页面的URL，再给匹配的<a>标签设置加粗样式，下面是具体的实现方案：

核心思路 #

1. 等待页面DOM完全加载完成，避免操作还未渲染的元素
2. 获取当前页面的路径（比如/或者/students）
3. 匹配导航栏中href属性与当前路径一致的链接，给它设置字体加粗样式

具体实现代码 #

方法一：直接通过JS设置行内样式 #

把这段代码放到你的HTML页面的<script>标签里（推荐放在</body>标签之前）：

// 等待DOM加载完毕再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面的路径
    const currentPagePath = window.location.pathname;
    // 获取导航栏里的所有链接
    const navLinks = document.querySelectorAll('.links a');

    // 遍历每个链接，匹配当前页面路径
    navLinks.forEach(link => {
        if (link.getAttribute('href') === currentPagePath) {
            // 设置字体加粗
            link.style.fontWeight = 'bold';
        }
    });
});

方法二：通过添加CSS类实现（更推荐，样式与行为分离） #

如果你的styles.css里已经定义了.active类，那我们可以用JS给匹配的链接添加这个类，让样式集中在CSS里，更易维护：

首先确保CSS里有这个类：

.active {
    font-weight: bold;
    /* 还可以扩展其他样式，比如文字颜色、下划线等 */
}

然后JS代码改成：

document.addEventListener('DOMContentLoaded', function() {
    const currentPagePath = window.location.pathname;
    const navLinks = document.querySelectorAll('.links a');

    navLinks.forEach(link => {
        // 先移除所有链接的active类，避免多个链接同时加粗
        link.classList.remove('active');
        if (link.getAttribute('href') === currentPagePath) {
            // 给匹配的链接添加active类
            link.classList.add('active');
        }
    });
});

效果说明 #

• 当你在/页面（教师页面）时，<a href="/">Teachers</a>会被设置为粗体
• 当你切换到/students页面（学生页面）时，<a href="/students">Students</a>会自动变成粗体，同时Teachers的粗体效果会被移除（方法二的情况下）

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