Result
jQuery
//フィルタしたいリスト全てにclass="all"を追加し、1個飛ばしでclass="odd"を更に追加$('#links').children('li').addClass('all').filter('li:odd').addClass('odd');//a要素クリックでクリックイベント発火$('#options li a').click(function() { var $this = $(this), type = $this.attr('class'); //フィルタリングと同時に、一旦ストライプ用のclassを削除して新たにclassを追加し直す $('#links').children('li').removeClass('odd').hide().filter('.' + type).show().filter(':odd').addClass('odd'); return false;}); |
css
body { width: 385px; text-align: center; margin: auto; font-family: helvetica, arial;}#options { border: 1px solid #e5e5e5; padding: 8px;}#options li { display: inline; border-right: 1px solid #e5e5e5; padding-right: 10px; margin-right: 10px;}#options li:last-child { border-right: none;}#options li a { text-decoration: none; color: #292929; outline: none;}ul li a:hover { text-decoration: underline;}.selected { font-weight: bold;}#links { clear: both;}.odd { background: #e5e5e5;}li { list-style: none; line-height: 1.5em; padding: 5px; background: #f4f4f4; text-align: left; border-bottom: 1px solid #dddddd; }li a { text-decoration: none; color: #353535; font-size: 14px; }#options li { background: none; border: none; color: #ab1313; text-align: left;}.odd { border-top: 1px solid white;}#links { margin: 0; padding: 0;}#links li { padding-left: 10px;}a:focus { font-weight: bold;} |
html
<ul id="options"> <li><a href="javascrit:void(0);" class="all">All</a></li> <li><a href="javascrit:void(0);" class="php">PHP</a></li> <li><a href="javascrit:void(0);" class="css">CSS</a></li> <li><a href="javascrit:void(0);" class="js">JavaScript</a></li> <li><a href="javascrit:void(0);" class="html">HTML</a></li> </ul> <ul id="links"> <li class="php html"><a>PHP and HTML</a></li> <li class="php"><a>PHP</a></li> <li class="css php js html"><a>ALL</a></li> <li class="js"><a>JavaScript</a></li> <li class="html"><a>HTML</a></li> </ul> |
via
Quick and Easy Filtering 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
