Comment puis-je partager facilement des en-têtes et des pieds de page sur plusieurs pages HTML à l'aide de JavaScript ?

Adoption des éléments d'en-tête et de pied de page partagés dans les pages HTML

Introduction :

Imaginez un scénario dans lequel vous souhaitez incorporer des sections identiques, telles que des en-têtes et pieds de page, dans plusieurs pages HTML. En tirant parti de la puissance de JavaScript, cette tâche devient réalisable sans effort. Cet article examinera une solution qui vous permet d'incorporer sans effort des éléments d'en-tête et de pied de page partagés dans vos pages Web.

Le parcours :

Pour commencer votre projet, vous exploiterez les capacités de jQuery . Invoquez cette formidable bibliothèque dans votre en utilisant le JavaScript suivant :

<script src="https://code.jquery.com/jquery-3.3.1.js"  crossorigin="anonymous"></script>

Une fois jQuery établi sa présence, lancez-vous dans la construction de la page index.html. Dans le élément, intégrez ce qui suit :

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

Ce script demande à jQuery de charger dynamiquement les fichiers header.html et footer.html dans les éléments div portant les ID "en-tête" et "pied de page".

Maintenant, portez votre attention sur la création de header.html et footer.html, en assurant leur présence aux côtés de index.html. Remplissez ces fichiers avec le contenu que vous souhaitez voir apparaître dans les sections respectives :

<!-- Content for header.html and footer.html -->

Lors de la visite de index.html, émerveillez-vous devant l'intégration transparente des éléments d'en-tête et de pied de page partagés. Les liens intégrés dans ces éléments partagés, si vous choisissez de les incorporer, fonctionneront comme prévu.

Conclusion :

Avec cette solution élégante, vous possédez désormais la possibilité de maintenir sans effort un en-tête et un pied de page cohérents. éléments sur plusieurs pages HTML. Adoptez cette nouvelle capacité pour améliorer la cohésion et l’efficacité de vos efforts de développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!