Bagaimanakah Saya Boleh Memasukkan Pengepala dan Pengaki Biasa Merentas Berbilang Halaman HTML Menggunakan JavaScript dengan Cekap?

Termasuk Pengepala dan Pengaki Biasa dalam Berbilang Halaman HTML

Untuk memasukkan bahagian pengepala dan pengaki biasa merentas berbilang halaman HTML, menggunakan JavaScript adalah cekap pendekatan. Berikut ialah panduan langkah demi langkah tentang cara untuk mencapai ini:

1. Buat Elemen Pemegang Tempat: Dalam halaman HTML utama (cth., index.html), cipta elemen pemegang tempat dengan ID unik (cth.,
   ) dan

   ). Pemegang tempat ini akan berfungsi sebagai sauh untuk memuatkan kandungan pengepala dan pengaki.
2. Muat Pengepala dan Pengaki Luaran: Dalam halaman HTML utama; bahagian, sertakan perpustakaan jQuery dan blok skrip yang memuatkan kandungan pengepala dan pengaki melalui permintaan AJAX. Berikut ialah skrip contoh:

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

Skrip ini membuat permintaan AJAX kepada fail "header.html" dan "footer.html" luaran dan memuatkan kandungannya ke dalam elemen pemegang tempat yang ditentukan.

3. Buat Templat Pengepala dan Pengaki: Dalam fail HTML yang berasingan ("header.html" dan "footer.html"), tentukan kandungan yang anda ingin sertakan dalam pengepala dan pengaki. Contohnya:

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

<!-- footer.html -->
<p>Copyright 2023</p>

4. Letakkan Fail Pengepala dan Pengaki: Letakkan fail "header.html" dan "footer.html" dalam direktori yang sama seperti halaman HTML utama (iaitu, index.html).
5. Lawati Utama Halaman HTML: Akhir sekali, muatkan halaman HTML utama (index.html) dalam penyemak imbas anda. Anda kini seharusnya melihat bahagian pengepala dan pengaki yang dikongsi disertakan pada halaman. Mengklik pada pautan dalam pengepala harus mengubah hala anda seperti yang dimaksudkan.

Dengan mengikuti langkah ini, anda boleh dengan mudah memasukkan dan mengekalkan bahagian pengepala dan pengaki yang konsisten merentas berbilang halaman HTML menggunakan JavaScript dan AJAX. Pendekatan ini menghapuskan keperluan untuk menyalin-tampal kod dalam setiap halaman individu, memastikan kecekapan dan kemudahan pengurusan.