jQuery를 사용하여 여러 HTML 페이지에 걸쳐 재사용 가능한 머리글과 바닥글을 만들려면 어떻게 해야 합니까?

여러 HTML 페이지에 재사용 가능한 머리글 및 바닥글 파일 통합

여러 HTML 페이지에서 공유되는 재사용 가능한 머리글 및 바닥글 요소를 만들려면 효과적인 접근 방식 중 하나 JavaScript의 기능을 활용하는 것이 포함됩니다. 이 기사에서는 이 기능을 구현하기 위해 널리 사용되는 JavaScript 라이브러리인 jQuery를 활용하는 자세한 솔루션을 제공합니다.

1단계: HTML 구조 정의

상위 HTML 페이지( 예를 들어 index.html), 머리글과 바닥글 콘텐츠가 로드될 두 개의 자리 표시자 요소를 만듭니다. 고유 ID를 사용하여 이러한 요소를 식별합니다.

<div>
<p><strong>2단계: jQuery 함수 삽입</strong></p>
<p>HTML 헤드 섹션에 jQuery 라이브러리를 포함합니다. 그런 다음 머리글 및 바닥글 HTML 파일을 지정된 요소에 로드하는 jQuery 함수를 정의합니다.</p>
<pre class="brush:php;toolbar:false"><script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
$(function() {
  $("#header").load("header.html");
  $("#footer").load("footer.html");
});
</script>

3단계: 머리글 및 바닥글 파일 생성

만들기 각각 원하는 콘텐츠가 포함된 별도의 HTML 파일(예: header.html 및 footer.html) 예를 들어 header.html에는 다음이 포함될 수 있습니다.

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

4단계: 상위 페이지에 콘텐츠 배치

상위 HTML 페이지에 액세스할 때(예: index.html), jQuery는 header.html 및 footer.html의 내용을 해당 자리 표시자 요소에 동적으로 로드하여 이러한 헤더와 footer.html을 포함하는 모든 페이지에 걸쳐 통합된 표시를 생성합니다. 바닥글.

이 접근 방식을 사용하면 공유 머리글 및 바닥글 콘텐츠를 중앙 위치에서 유지 및 업데이트하여 웹사이트 관리를 단순화하고 표시 및 탐색의 일관성을 보장할 수 있습니다.