htmlをそれぞれ分けて管理する

どうもsu-sanです。

webページを作成している際、グロナビ周りやfooterに追加の変更があった場合いちいちコピペして回るのは面倒くさいですよね？

今回はCodeIgniter、CakePHPを始めとしたCMSを使用せずにheaderやfooterをパーツ化して管理する方法を書いていきたいと思います！

まずは共通化したい部分が記述されたhtmlを作成します！ファイルネームはheader.htmlで・・・

<div id="glovalnav">
  <ul>
   <li>サプライド</li>
　　　　　　<li>サプライド</li>
  </ul>
</div>

<ul>

<li>サプライド</li>

</ul>

</div>

次に読み込ませたいhtmlのheadでjqueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

その直下に下記を記述します。header.htmlのglobalnavというidのdiv要素を取得して、div#navに展開する。という感じです。

$(function(){
$("#nav").load("header.html #globalnav");
})

$(function(){

$("#nav").load("header.html #globalnav");

})

読み込ませたいhtmlに

<div id="nav">
　<!--ここに挿入されます-->
</div>

</div>

こう記述すれば完了！

これだけで簡単に共通化することができます。

皆さんも試して見てはいかがでしょうか？