WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

jQueryでパーツの読み込み

デモ
http://efu.sakura.ne.jp/web/include_jquery/

ファイル構成

ルート                        
  ├──include                        
  │    ├──footer.html  
  │    └──header.html  
  ├──index.html  
  └──script.js  

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでパーツの読み込み</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <header class="header">
  </header>
  <div class="main">
    <h2>メインコンテンツ</h2>
  </div>
  <footer class="footer">
  </footer>
</body>
</html>

header.html

    <h1>jQueryでパーツの読み込み</h1>

footer.html

    <p><small>&copy; WEBデザインの勉強</small></p>
$(function(){
  $(".header").load("include/header.html");
  $(".footer").load("include/footer.html");
});

jsファイルからのパスではなく、読み込んでいるHTMLファイルからのパスを記述