无法将 class 添加到包含的 HTML 文件中的元素

Question

I've used jquery script to load external header file in every html page. But I'm unable to add class so that I can change color of selected navbar list element using jquery. jquery code to include html file in head section:

<script>
    $(function() {
        $('.header').load('header.html');
        $('.footter').load('footer.html');
    });
</script>

Here is the code from header.html:

<ul id="nav-links" class="nav-links">
    <li class="active"><a href="index.html">Home</a></li>
    <li id="nav-prod"><a href="products.html">Products</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html"> Contact Us</a></li>
    <li><a href="cart.html"> Cart</a>
        <span class="cartcount">(0)</span>
    </li>
</ul>

I tried to remove "active" class from Home page and add it to products page when it's clicked using ready() in jquery.

if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
   ready()
}


function ready() {
$(".active").removeClass("active");
$("#nav-prod").addClass("active");
}

But it's not working.

Answer 1

Since load() is an async operation, there is no guarantee that ready() runs before header.html is added to the page. Try using the load callback here instead.

$(function() {
  $('.header').load('header.html', function() {
    $(".active").removeClass("active");
    $("#nav-prod").addClass("active");
  });
  $('.footter').load('footer.html');
});