将类添加到要加载到页面中的元素

如何解决将类添加到要加载到页面中的元素

我目前正在建立一个网站，并试图解决此问题。

我的标题放在一个单独的HTML文档中，如下所示：

<div class="topnav" id="myTopnav">
<a href="Index.html" id="home"><i class="fa fa-fw fa-home"></i>Home</a>                  
<a href="Drinks.html" id="drinks"><i class="fa fa-fw fa-coffee"></i>Drinks</a>
</div>

现在在每个页面上，我都从此HTML加载标题：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
$('#content').load("Header.html");
});
</script>
</head>

<header class="head">
<div id="content"></div>
</header>

现在，我正在尝试向“ a href” -Tag动态添加一个类，以使其处于活动状态，但这不起作用。我试图在“ head” -Tag中编写另一个函数：

 <script>
 function addAct() {
 var element = document.getElementById("#home");
 element.classList.add(".active");
 };
 </script>

，并在调用加载函数后立即在“ head” -Tag中手动调用它：

 <script>addAct()</script>

这似乎不起作用。我尝试了很多其他解决方案，但找不到任何有效的方法。有人可以帮忙吗？

非常感谢！

解决方法

您是否尝试在.load（）中使用complete回调

像这样：

$(document).ready(function(){ 
    $('#content').load("Header.html",function(){
       // complete loading
       $('#home').addClass('active')
    });
});

如果您使用本机js，则无需在classList.add('active')中设置点（。），如果添加点，则会得到<div class=".active"></div>

.load()方法是异步的。因此，您需要利用 complete 回调（即：只有当您拥有数据时，才能应用该类）。

此外，您还有一些错误：

从document.getElementById（“＃home”）更改为document.getElementById（“ home”）
与element.classList.add（“。active”）;的更改；到element.classList.add（“ active”）;

代码：

$('#content').load("https://gist.githubusercontent.com/gaetanoma/7b7ad4592c2b69e14b7cbe0c888ef1be/raw/3cbf59473c5f55a1db5a29f51498f3e9d6739e9b/Header.html",function() {
    var element = document.getElementById("home");
    element.classList.add("active");
});

.active {
    background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<header class="head">
    <div id="content"></div>
</header>