Comment puis-je utiliser jQuery pour inclure des en-têtes et des pieds de page communs dans plusieurs pages HTML ?

Inclure des fichiers d'en-tête et de pied de page communs dans plusieurs pages HTML

Il est souvent souhaité de créer des pages d'en-tête et de pied de page communes qui sont incluses dans plusieurs pages HTML. Pages HTML. Cela peut fournir une apparence cohérente à un site Web ou à une application. Une façon d'y parvenir consiste à utiliser JavaScript.

Utiliser JQuery pour charger l'en-tête et le pied de page

jQuery est une puissante bibliothèque JavaScript qui permet une manipulation facile du DOM. Voici comment utiliser jQuery pour charger des pages d'en-tête et de pied de page dans votre HTML :

Dans votre page HTML principale (par exemple, index.html), ajoutez le code suivant dans le champ

element :

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

Ce script charge la bibliothèque jQuery à partir d'un CDN.

Ensuite, ajoutez le script suivant dans le

element :

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

Ce script utilise jQuery pour charger dynamiquement le contenu de header.html et footer.html dans les éléments HTML correspondants (avec les ID "header" et "footer").

Dans header.html et footer.html, qui doivent se trouver dans le même répertoire que index.html, incluez le contenu ou les éléments requis. Par exemple :

<!-- header.html -->
<a href="http://www.google.com">Click here for Google</a>

<!-- footer.html -->
© 2023 My Company

Désormais, lorsque vous visitez index.html, les sections d'en-tête et de pied de page seront chargées dynamiquement à partir des fichiers HTML correspondants. Vous pourrez cliquer sur le lien dans l’en-tête pour visiter Google. Cela vous permet de créer des pages d'en-tête et de pied de page communes et réutilisables qui peuvent être facilement incluses dans plusieurs pages HTML.

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!