Bagaimanakah Saya Boleh Menggunakan JavaScript untuk Memasukkan Pengepala dan Pengaki Biasa Merentasi Berbilang Halaman HTML?-tutorial js-php.cn

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

Patricia Arquette

Lepaskan： 2024-12-05 06:06:18

asal

989 orang telah melayarinya

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>

Salin selepas log masuk

header.html dan footer.html Kod

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

Salin selepas log masuk

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

Salin selepas log masuk

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!