Bagaimanakah Saya Boleh Menggunakan jQuery untuk Memasukkan Pengepala dan Pengaki Biasa dalam Berbilang Halaman HTML?

Termasuk Fail Pengepala dan Pengaki Biasa dalam Berbilang Halaman HTML

Ia selalunya dikehendaki untuk membuat halaman pengepala dan pengaki biasa yang disertakan dalam berbilang halaman HTML. Ini boleh memberikan rupa dan rasa yang konsisten untuk tapak web atau aplikasi. Satu cara untuk mencapainya ialah dengan menggunakan JavaScript.

Menggunakan JQuery untuk Memuatkan Pengepala dan Pengaki

jQuery ialah perpustakaan JavaScript yang berkuasa yang membolehkan manipulasi mudah DOM. Begini cara anda boleh menggunakan jQuery untuk memuatkan halaman pengepala dan pengaki ke dalam HTML anda:

Dalam halaman HTML utama anda (cth., index.html), tambah kod berikut dalam

elemen:

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

Skrip ini memuatkan perpustakaan jQuery daripada CDN.

Seterusnya, tambahkan skrip berikut dalam

elemen:

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

Skrip ini menggunakan jQuery untuk memuatkan kandungan header.html dan footer.html secara dinamik ke dalam elemen HTML yang sepadan (dengan ID "header" dan "footer").

Dalam header.html dan footer.html, yang sepatutnya terletak dalam direktori yang sama seperti index.html, masukkan kandungan atau elemen yang diperlukan. Contohnya:

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

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

Kini, apabila anda melawati index.html, bahagian pengepala dan pengaki akan dimuatkan secara dinamik daripada fail HTML yang sepadan. Anda akan dapat mengklik pautan dalam pengepala untuk melawat Google. Ini membolehkan anda membuat halaman pengepala dan pengaki yang biasa dan boleh digunakan semula yang boleh disertakan dengan mudah dalam berbilang halaman HTML.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan jQuery untuk Memasukkan Pengepala dan Pengaki Biasa dalam Berbilang Halaman HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!