无法将类添加到包含的 HTML 文件中的元素答案

【问题标题】：Unable to add class to element in included HTML file无法将类添加到包含的 HTML 文件中的元素
【发布时间】：2021-08-23 07:02:32
【问题描述】：

我使用 jquery 脚本在每个 html 页面中加载外部头文件。但我无法添加类，以便我可以使用 jquery 更改所选导航栏列表元素的颜色。 jquery 代码在 head 部分中包含 html 文件：

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

这里是 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>

我尝试从主页中删除“活动”类，并在使用 jquery 中的 ready() 单击它时将其添加到产品页面。

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


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

但它不起作用。

【问题讨论】：

标签： javascript html jquery header

【解决方案1】：

由于 load() 是一个异步操作，因此无法保证在将 header.html 添加到页面之前运行 ready()。请尝试在此处改用加载回调。

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

【讨论】：