如何根据所在页面为header.php中的导航栏动态添加black-nav类？

你这个思路完全没问题！核心逻辑通过当前页面文件名判断，再给目标导航栏添加指定类，这个方向是非常正确的。不过可以补充几个细节优化和替代方案，让代码更鲁棒：

1. 先确认依赖是否到位 #

你的代码用了$('.js--main-nav')，这是jQuery的写法，要确保这段脚本执行之前，jQuery已经被引入到页面中（比如在<head>里加载jQuery，或者把脚本放在页面底部，等DOM和jQuery都加载完成后再执行）。

如果不想依赖jQuery，用原生JS也能实现同样效果，反而更轻量化：

let url = window.location.pathname;
let filename = url.substring(url.lastIndexOf('/') + 1);
let nav = document.querySelector('.js--main-nav');
if (filename === 'page2.php' || filename === 'page3.php') {
    nav.classList.add('black-nav');
}

2. 添加元素存在判断避免报错 #

如果页面中意外找不到.js--main-nav元素，代码会抛出错误。可以加个小判断确保元素存在后再操作：

// 原生JS版本（推荐）
let url = window.location.pathname;
let filename = url.substring(url.lastIndexOf('/') + 1);
let nav = document.querySelector('.js--main-nav');
// 先判断nav存在，再判断页面
if (nav && (filename === 'page2.php' || filename === 'page3.php')) {
    nav.classList.add('black-nav');
}

// jQuery版本
let url = window.location.pathname;
let filename = url.substring(url.lastIndexOf('/')+1);
let nav = $('.js--main-nav');
if(nav.length > 0 && (filename == 'page2.php'|| filename == 'page3.php')) {
    nav.addClass('black-nav');
}

3. 更灵活的页面匹配方式 #

如果以后需要给更多页面添加这个类，每次修改if条件会比较麻烦。可以把目标页面放在数组里，用includes方法判断，扩展性更好：

let url = window.location.pathname;
let filename = url.substring(url.lastIndexOf('/') + 1);
let nav = document.querySelector('.js--main-nav');
// 把需要加类的页面都放在这里，后续直接添加即可
const targetPages = ['page2.php', 'page3.php'];

if (nav && targetPages.includes(filename)) {
    nav.classList.add('black-nav');
}

总的来说，你最初写的代码逻辑是正确的，上面这些调整主要是为了让代码在更多场景下能稳定运行，也更易于维护。

内容的提问来源于stack exchange，提问作者Jose Andres Montes Espinoza