Добавление класса к элементу, который загружается на страницу

#javascript #html #css #ajax #function

#javascript #HTML #css #ajax #функция

Вопрос:

В настоящее время я создаю веб-сайт и пытаюсь решить эту проблему.

У меня есть мой заголовок в отдельном 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», чтобы сделать его активным, но это не работает. Я попытался написать другую функцию в теге «head»:

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

и вызвать его вручную в теге «head» сразу после вызова функции загрузки:

  <script>addAct()</script>

Похоже, это не работает. Я перепробовал множество других решений, но не смог найти ничего, что работает.
Кто-нибудь может помочь?

Большое спасибо!

Ответ №1:

Вы пробовали использовать complete обратный вызов в .load()

вот так:

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

Если вы используете собственный js, вам не нужно устанавливать dot (.) в classList.add('active') если вы добавите dot, вы получите <div class=".active"></div>

Ответ №2:

Метод .load() является асинхронным. Следовательно, вам нужно воспользоваться полным обратным вызовом (т. Е. только когда у вас есть данные, вы можете применить класс).

Более того, у вас есть некоторые ошибки:

измените document.getElementById(«#home») на document.getElementById(«home»)
измените с element.classList.add(«.активный»); на element.classList.add(«активный»);

Код:

 $('#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>