
ページごとにidを与えて対応した画像ナビゲーションをonにする
2014年12月17日jQueryのみでつくるギミック
ページごとにそのページの大枠となる要素にidを与え、各画像ナビゲーションの親要素に与えたclassがそのid名と同じ場合、対応した画像ボタンのパスを_offから_onに変更し、アクティブなページのナビゲーションを自動的に切り替えます。
JavaScript
(function($){ $(function() { var pid=$('.container').attr('id'); if( typeof pid != 'undefined' && pid != false ){ $('#globalNav li.'+pid+' a img').attr('src', $('#globalNav li.'+pid+' a img').attr("src").replace("_off", "_on")); } }); })(jQuery);
HTML
<div class="container" id="page02"> <nav id="globalNav"> <ul> <li class="page01"><a href="page01.html"><img src="nav_01_off.png" width="120" height="36" alt="page01" /></a></li> <li class="page02"><a href="page02.html"><img src="nav_02_off.png" width="120" height="36" alt="page02" /></a></li> <li class="page03"><a href="page03.html"><img src="nav_03_off.png" width="120" height="36" alt="page03" /></a></li> <li class="page04"><a href="page04.html"><img src="nav_04_off.png" width="120" height="36" alt="page04" /></a></li> <li class="page05"><a href="page05.html"><img src="nav_05_off.png" width="120" height="36" alt="page05" /></a></li> </ul> </nav> </div>
CSS
#globalNav { width: 605px; margin: 0 auto; } #globalNav ul li { margin-right: 1px; float: left; }