jQueryを用いてメニュー項目に色を付けるメモ。
htmlでメニュー部分を共通化して読み込ませるようにした。
そのうえで、共通化したメニュー部分に勝手にcurrentのスタイルを適用するようにした。
共通部分としての読み込み
参考：【jQuery】htmlページをパーツごとに分けて読み込む方法 - HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE
jqueryは適当に取ってくる。
適当な階層において、<head></head>内に以下を記述する
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#menu").load("part-menu.html");
$("#footer").load("footer.html");
});
</script>
「#～」でid名を指定すると、そのidに対応する場所が指定したhtmlに置き換わる。
この時、htmlファイルの中身は部分だけでいい（<body>とか<head>とかは要らない）
また、対応するdivの中はごっそり入れ替わるので、もともと書いてある内容は消える。
ページ全体の読み込み後に部分の読み込みが入るので一瞬ちらつくのが気になる。
メニュー項目にcurrentの属性を付ける
参考：【jQuery】グローバルナビゲーションで現在のページ（カレントページ）にclassを自動追加 | Colored Rhythm
こんなメニューがあるとする。
<ul id="navigationmenu">
<li class="nav1"><a href="/">メニュー1</a></li>
<li class="nav2"><a href="page2">メニュー2</a></li>
<li class="nav3"><a href="page3">メニュー3</a></li>
<li class="nav4"><a href="page4">メニュー4</a></li>
</ul>
同様に、対称ページの<head></head>内に以下を記述して読み込んでおく。
<script src="js/jquery.min.js"></script>
そのうえで、
<script>
$(function(){
$('#navigationmenu li a').each(function(){
var $href = $(this).attr('href');
if(location.href.match($href)) {
$(this).parent('li').addClass('current');
} else {
$(this).parent('li').removeClass('current');
}
});
});</script>
としてやると、
<ul id="navigationmenu">
<li class="nav1 current"><a href="/">メニュー1</a></li>
<li class="nav2"><a href="page2">メニュー2</a></li>
<li class="nav3"><a href="page3">メニュー3</a></li>
<li class="nav4"><a href="page4">メニュー4</a></li>
</ul>
になる。
半角スペースは勝手に入る？
