
メニューと連動した要素の切り替え(マウスhover版)
2013年3月31日jQueryのみでつくるギミック
メニューにマウス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>