JSでナビゲーションを表示
HTML
ナビゲーションを表示したい場所にマークアップ
|
1 |
<section id="inc-header"></section> |
|
1 |
<script>header('./');</script> |
読み込まれるファイル（header.html）
|
1 2 3 4 5 6 7 8 9 10 |
<header id="site-header"> <div id="site-logo"> ロゴ</div> <nav id="global-nav"> <ul> <li><a href="{$root}">HOME</a></li> <li><a href="{$root}menu1/">menu1</a></li> <li><a href="{$root}menu2/">menu2</a></li> </ul> </nav> </header> |
Jquery(1.12.4での場合)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function header(rootDir) { $.ajax({ url: rootDir + "header.html", cache: false, async: false, dataType: 'html', success: function (html) { html = html.replace(/\{\$root\}/g, rootDir); $("#inc-header").html(html); } }); } |
