jQeury

header와 footer를 include하는 제이쿼리 메서드('load')

밍블리-셔 2022. 10. 3. 16:13

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>