여러 HTML 페이지에 재사용 가능한 헤더 및 바닥 글 파일을 통합하여 여러 HTML 페이지에서 공유되는 재사용 가능한 헤더 및 바닥 글 요소를 생성하기 위해 하나의 효과적인 접근 방식을 생성합니다. JavaScript의 기능을 활용하는 것이 포함됩니다. 이 기사는 인기있는 JavaScript 라이브러리 인 JQuery를 사용 하여이 기능을 달성하기 위해 자세한 솔루션을 제공합니다.

1 단계 : HTML 구조를 정의하십시오

 
   
 
 
 


 
  HTML 헤드에 jQuery 라이브러리를 포함시킵니다. 부분. 그런 다음 jQuery 함수를 정의하여 헤더 및 바닥 글 html 파일을 지정된 요소로로드합니다. /스크립트>


$ (function () {
  $ ( "#header"). load ( "header.html");
  $ ( "#푸더"). load ( "fumer.html");
});
  
 
 3 단계 : 헤더 및 바닥 글 파일을 만듭니다 
 
Click here for Google
 
  [예 : header.html 및 footer.html). 원하는 컨텐츠. 예를 들어, Header.html은 다음을 포함 할 수 있습니다 :  
  Google을 보려면 여기를 클릭하십시오  
 
 
 
 4 단계 4 단계. : 부모 페이지 
  
 부모 HTML 페이지 (예 : index.html)에 액세스 할 때 jquery는 header.html 및 footer.html의 내용을 각자의 자리 표시 자 요소에 동적으로로드합니다. , 이러한 헤더 및 바닥 글을 포함하는 모든 페이지에서 통합 디스플레이가 발생합니다. .