javascript - 使用javascript将css类添加到使用javascript实现的 header

Question

我正在开发一个包含许多 html 文件的网站，最近我开始使用单独的页眉和页脚 html 文件，以便通过在我的页面上使用 javascript 实现它们来节省时间。现在的问题是所有页眉和页脚看起来都一样，而在使用这种方便的技术之前，我根据您所在的页面突出显示了页面(这是通过手动将类添加到不同的 <a> 标签来完成的，具体取决于页面的内容(html 文件)是)，但现在我找不到定位特定 <a> 的方法这将只针对特定的 html 来更改它的 css。代码看起来像这样: HTML 主页.html:

  <div id="header"></div>

HTML header.html:

  <ul>
  <li id="LI_56">
              <a href="pages/home.html" id="A_57">Home</a>
  </li> 
  </ul> 

Javascript 看起来像这样:

$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});

CSS 看起来像这样:

.home{
background-color:red;
}

我尝试做的是:

          <script>
          $( document ).ready(function() {
          document.getElementById('A_57').className = 'home';
          }); 
          </script>

但我收到错误:“TypeError: document.getElementById(...) is null”。当 header 已经在我的 home.html 中并且不是由 javascript 实现时，一切正常，但这不是一个选择。希望有人知道解决方案。为每个 html 使用不同的 css 文件显然也不是一个选项 - 它应该尽可能直接和开发人员友好(聪明和懒惰)! :) 提前致谢!

Answer 1

在“完成”回调中设置类名，此回调在执行后处理和 HTML 插入后执行:

$(function(){
  $("#header").load("header.html", function() {
      document.getElementById('A_57').className = 'home';
  });
  $("#footer").load("footer.html"); 
});