当我使用javascript在不同的页面上时，如何在单独的header.html中更改活动的导航li？

在使用JavaScript在不同页面上时，可以通过以下步骤在单独的header.html中更改活动的导航li：

首先，在header.html中定义一个函数，用于设置活动导航li的样式。例如，可以给活动导航li添加一个特定的CSS类，以突出显示它。

<script>
function setActiveNav() {
  // 获取当前页面的URL
  var currentPageUrl = window.location.href;

  // 获取导航菜单的所有li元素
  var navItems = document.querySelectorAll('.nav li');

  // 遍历导航菜单的li元素
  for (var i = 0; i < navItems.length; i++) {
    var navItem = navItems[i];

    // 获取导航菜单项的链接URL
    var navItemUrl = navItem.querySelector('a').href;

    // 检查当前页面的URL是否与导航菜单项的URL匹配
    if (currentPageUrl === navItemUrl) {
      // 设置活动导航li的样式
      navItem.classList.add('active');
    } else {
      // 移除非活动导航li的样式
      navItem.classList.remove('active');
    }
  }
}
</script>

在每个页面的JavaScript代码中调用这个函数，以确保在页面加载时设置正确的活动导航li。

<script>
window.addEventListener('DOMContentLoaded', function() {
  setActiveNav();
});
</script>

在每个页面的header部分引入header.html文件，可以使用HTML的<object>标签或者服务器端的模板引擎进行引入。

<object data="header.html" width="100%" height="50"></object>

在header.html中的导航菜单中，给活动导航li添加一个特定的CSS类，以便在页面加载时设置正确的样式。

<ul class="nav">
  <li><a href="page1.html">Page 1</a></li>
  <li><a href="page2.html">Page 2</a></li>
  <li><a href="page3.html">Page 3</a></li>
</ul>

通过以上步骤，可以在不同的页面上使用JavaScript来更改单独的header.html中的活动导航li。当页面加载时，JavaScript会根据当前页面的URL与导航菜单项的URL进行匹配，然后设置活动导航li的样式。这样可以确保在不同的页面上正确显示活动导航li，提升用户体验。