Header와 Footer를 include하는 제이쿼리 load 메서드
(HTML 파일의 특정 부분에 외부 html 파일을 포함(include)시키는 메서드)
각 페이지의 html마다 header / footer는 동일하기 때문에
제이쿼리 메서드 load를 통해 불러온다.
$(‘.header-include’).load(‘header.html’, function(){
//헤더에 사용된 제이쿼리 구문은 반드시 이곳에 넣으세요.
})
Ex)
$(‘.header-include’).load(‘header.html’, function(){
$(‘.trigger’).click(function(){
$(‘.gnb’).toggleClass(‘active’)
})
})
//절대주소와 load메서드를 사용한것은 html파일을 더블클릭해서 열었을 때 깨짐(경로를 읽을 수 없음)
>>서버환경에서만 작동
<body>
<div class="container">
<!-- header include -->
<div class="header-include"></div>
<section>
<h1>Section</h1>
</section>
<!-- footer include -->
<div class="footer-include"></div>
</div>
<script>
$('.header-include').load('header.html', function () {
$('header h1').click(function () {
alert('Hello World')
})
});
$('.footer-include').load('footer.html');
</script>
</body>