Bagaimanakah Saya Boleh Mencipta Pengepala dan Pengaki Boleh Digunakan Semula dalam HTML Menggunakan JavaScript?

Mencipta Fail Pengepala dan Pengaki Boleh Digunakan Semula untuk Halaman HTML

Pengenalan:

Dalam bidang pembangunan web, selalunya berfaedah untuk mencipta elemen boleh guna semula, seperti pengepala dan pengaki, yang boleh disepadukan dengan lancar merentas berbilang HTML muka surat. Amalan ini bukan sahaja menyelaraskan penyelenggaraan tetapi juga memastikan ketekalan dan kecekapan.

Penyelesaian menggunakan JavaScript:

Untuk menangani isu ini, anda boleh memanfaatkan kuasa JavaScript, terutamanya jQuery . Dengan menggunakan fungsi load()nya, anda boleh memuatkan fail HTML luaran secara dinamik sebagai pengepala dan pengaki ke dalam dokumen HTML utama anda.

Pelaksanaan:

1. Index.html:

   • Tambah jQuery perpustakaan.
   • Tentukan teg skrip untuk memuatkan header.html dan footer.html menggunakan fungsi load().
   • Buat pemegang tempat
     elemen untuk pengepala dan pengaki, dengan ID unik.

   • Header.html dan Footer.html:

     • Mengandungi kandungan HTML yang diperlukan untuk pengepala dan pengaki, masing-masing.

   • Penggunaan:

     • Akses index.html dan amati kandungan pengepala dan pengaki yang dimuatkan.

   Contoh Kod:

   Index.html:

   
   ...
   <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
   </script>
   <script> 
   $(function(){
     $("#header").load("header.html"); 
     $("#footer").load("footer.html"); 
   });
   </script> 
   ...
   
   
   <div>
   <p><strong>Header.html dan Footer.html:</strong></p>
   <pre class="brush:php;toolbar:false"><a href="http://www.google.com">click here for google</a>

   Dengan menggabungkan pendekatan berasaskan JavaScript ini, anda boleh memasukkan halaman pengepala dan pengaki biasa ke dalam dokumen HTML anda dengan berkesan, meningkatkan kebolehgunaan semula kod dan mengekalkan konsistensi di seluruh halaman web anda.