Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menggunakan JavaScript untuk Memasukkan Pengepala dan Pengaki Biasa Merentasi Berbilang Halaman HTML?

Bagaimanakah Saya Boleh Menggunakan JavaScript untuk Memasukkan Pengepala dan Pengaki Biasa Merentasi Berbilang Halaman HTML?

Patricia Arquetteasal: 2024-12-05 06:06:18924semak imbas

How Can I Use JavaScript to Include Common Headers and Footers Across Multiple HTML Pages?

Sertakan Fail Pengepala dan Pengaki Biasa dalam Berbilang Halaman HTML dengan JavaScript

Dalam pembangunan web, selalunya perlu memasukkan elemen biasa, seperti pengepala dan pengaki, merentas berbilang halaman HTML untuk mengekalkan konsistensi dan organisasi. Ini boleh dicapai melalui penggunaan JavaScript.

Menggunakan jQuery untuk Kemasukan Header dan Footer

Satu kaedah untuk memasukkan fail pengepala dan pengaki biasa adalah melalui jQuery. Pustaka JavaScript ini menyediakan cara yang mudah dan cekap untuk memuatkan kandungan luaran ke dalam halaman web.

Mencipta Fail HTML

Untuk pendekatan ini, anda perlu mencipta tiga Fail HTML:

index.html: Mengandungi kandungan utama dan tempat untuk pengepala dan pengaki untuk disertakan.
header.html: Mengandungi kandungan pengepala.
footer.html: Mengandungi kandungan footer.

index.html Kod

<html>
<head>
  <title></title>
  <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>

header.html dan footer.html Kod

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

<!-- footer.html -->
<p>Copyright &copy; 2023</p>

Memuatkan Pengepala dan Pengaki

Setelah fail HTML dibuat, kaedah load() jQuery digunakan untuk muatkan kandungan header.html dan footer.html secara tidak segerak ke dalam elemen #header dan #footer dalam index.html, masing-masing.

Apabila pengguna melawati index.html, kandungan pengepala dan pengaki akan dipaparkan pada halaman, membolehkan pengalaman pengguna yang konsisten dan padu merentas berbilang halaman.

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

JavaScript jquery html for include using this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript Synchronous vs Asynchronous DipermudahkanArtikel seterusnya：JavaScript Synchronous vs Asynchronous Dipermudahkan

Artikel berkaitan

Lihat lagi