NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

ページごとにidを与えて対応した画像ナビゲーションをonにする

2014年12月17日jQueryのみでつくるギミック

ページごとにbodyへidを与えて、対応した画像ナビゲーションをonにする

ページごとにそのページの大枠となる要素に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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. ページごとにidを与えて対応した画像ナビゲーションをonにする

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com