Bolehkah jQuery Mengintegrasikan Pengepala dan Pengaki Biasa Merentas Berbilang Halaman HTML dengan lancar?

Membenamkan Kandungan Pengepala dan Pengaki Biasa dalam Berbilang Halaman HTML

Meningkatkan pengalaman pengguna selalunya melibatkan paparan bahagian pengepala dan pengaki yang konsisten merentas berbilang halaman web . Untuk mencapai matlamat ini, adalah menjadi amalan biasa untuk membuat fail berasingan untuk pengepala dan pengaki dan memasukkannya dalam setiap halaman HTML. Walau bagaimanapun, dengan hanya menggunakan HTML dan JavaScript, adakah mungkin untuk menyepadukan elemen kongsi ini dengan lancar?

Menggunakan jQuery untuk Kemasukan Pengepala dan Pengaki

Untuk menyelesaikan tugas ini dengan berkesan, kami boleh memanfaatkan keupayaan perpustakaan jQuery. Berikut ialah panduan langkah demi langkah untuk menyediakan kod HTML dan JavaScript anda:

1. Penanda HTML:

Dalam fail index.html utama, masukkan jQuery dan tentukan JavaScript yang memuatkan pengepala dan pengaki secara dinamik:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
  $(function() {
    $("#header").load("header.html");
    $("#footer").load("footer.html");
  });
</script>

Seterusnya, buat bekas div dalam badan bahagian di mana pengepala dan pengaki akan dipaparkan:

  <div>
<p><strong>2. Fail Header dan Footer:</strong></p>
<p>Dalam fail header.html dan footer.html yang berasingan, tentukan kandungan yang anda ingin sertakan:</p>
<pre class="brush:php;toolbar:false"><!-- header.html -->
<a href="http://www.google.com">click here for google</a>

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

3. Pelaksanaan:

Apabila halaman index.html dimuatkan, jQuery akan memuatkan kandungan dari header.html ke dalam div dengan id "header" dan footer.html ke dalam div dengan id "footer. " Dengan cara ini, kedua-dua pengepala dan pengaki akan dipaparkan pada semua halaman yang termasuk index.html.

Dengan memanfaatkan fleksibiliti jQuery, anda boleh mencipta elemen pengepala dan pengaki yang konsisten yang meningkatkan pengalaman pengguna web HTML anda dengan mudah. muka surat.