エフェクトなしのシンプルなリストのフィルタリング機能
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