Bagaimanakah Saya Boleh Mencipta Pengepala dan Pengaki Boleh Digunakan Semula dalam HTML Menggunakan JavaScript?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-23 13:12:10

asal

935 orang telah melayarinya

How Can I Create Reusable Headers and Footers in HTML Using 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:

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:

<html>
<head>
...
<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> 
...
</head>
<body>
<div>

Salin selepas log masuk

Header.html dan Footer.html:

<a href="http://www.google.com">click here for google</a>

Salin selepas log masuk

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.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Pengepala dan Pengaki Boleh Digunakan Semula dalam HTML Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!