NAKAZI LAB.(ナカジラボ)

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

メニューと連動した要素の切り替え(マウスhover版)

2013年3月31日jQueryのみでつくるギミック

メニューと連動した要素の切り替え(マウスhover版)

メニューにマウスhoverすることによって対応した要素を連動して切り替えます。

デモページ

JavaScript

(function($){
	$(function() {

		$("#menu li a").hover(function(){
			var menuNmbr = $("#menu li a").index(this);
			var showContent = menuNmbr+1;
			$('#content li:nth-child('+showContent+')').stop(true, true).fadeIn('normal')
		},function(){
			var menuNmbr = $("#menu li a").index(this);
			var showContent = menuNmbr+1;
			$('#content li:nth-child('+showContent+')').stop(true, true).fadeOut('fast');
		});

	});
})(jQuery);

HTML

<div id="switch">
	<ul id="menu">
		<li><a href="#">menu01</a></li>
		<li><a href="#">menu02</a></li>
		<li><a href="#">menu03</a></li>
		<li><a href="#">menu04</a></li>
		<li><a href="#">menu05</a></li>
		<li><a href="#">menu06</a></li>
		<li><a href="#">menu07</a></li>
		<li><a href="#">menu08</a></li>
	</ul>
	<ul id="content">
		<li>content01</li>
		<li>content02</li>
		<li>content03</li>
		<li>content04</li>
		<li>content05</li>
		<li>content06</li>
		<li>content07</li>
		<li>content08</li>
	</ul>
</div>

デモページ

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

関連記事

  1. メニューと連動した要素の切り替え(マウスhover版)

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

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

連絡先

nakazilab[atmark]gmail.com