Result
Todo:余計なコードがあります。もっと短く出来ますね。
jQuery
$(document).ready(function() { //a要素をクリックでイベント発火 $('ul#filter a').click(function() { $(this).css('outline','none'); $('ul#filter .current').removeClass('current'); $(this).parent().addClass('current'); //小文字/大文字の処理 var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { //マッチしない要素を隠す $('ul#portfolio li.hidden').slideDown('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).slideUp('normal').addClass('hidden'); } else { $(this).slideDown('slow').removeClass('hidden'); } }); } return false; });}); |
css
div#container { margin: 20px auto 0; overflow: hidden; width: 640px; }ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; }ul#filter li { border-right: 1px solid #dedede; float: left; line-height: 16px; margin-right: 10px; padding-right: 10px;}ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }ul#filter a { color: #999; text-decoration: none; }ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }ul#filter li.current a { color: #333; font-weight: bold; }ul#portfolio { float: left; list-style: none; margin-left: 0; width: 672px; }ul#portfolio li { border: 1px solid #dedede; float: left; margin: 0 10px 10px 0; padding: 5px; width: 102px; background:#f7f7f7;}ul#portfolio a { display: block; width: 100%; }ul#portfolio a:hover { text-decoration: none; }ul#portfolio img { border: 1px solid #dedede; display: block; } |
html
<div id="container"> <ul id="filter"> <li class="current"><a href="#">All</a></li> <li><a href="#">red</a></li> <li><a href="#">yellow</a></li> <li><a href="#">black</a></li> </ul> <ul id="portfolio"> <li class="red xmas"><a href="#"><img src="red.jpg" /></a></li> <li class="yellow"><a href="#"><img src="yellow.jpg" /></a></li> <li class="red xmas"><a href="#"><img src="red.jpg" /></a></li> ～ <li class="yellow"><a href="#"><img src="yellow.jpg" /></a></li> <li class="black"><a href="#"><img src="black.jpg" /></a></li> </ul></div> |
via
Creating a “Filterable” Portfolio with jQuery
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
