How To Add Class To A Html File Loaded Via Jquery?

I've included my header & footer at separate html files using .load() from jQuery. My jQuery code is below: $(function(){ $('#header').load('page-component/header.html');

Solution 1:

Use complete callback of jQuery.load method.

.load( url [, data ] [, complete ] )

When you are invoking addClass method for element, element does not exist in DOM, callback function is invoked when external file is loaded in specified element

$(function() {
  $("#header").load("page-component/header.html", function() {
    jQuery('#menu-about').addClass('active');
  });
  $("#footer").load("page-component/footer.html", function() {
    jQuery('#menu-about').addClass('active');
  });
});