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