$('#links').children('li').addClass('all').filter('li:odd').addClass('odd'); $('#options li a').click(function() { var $this = $(this), type = $this.attr('class'); $('#links').children('li').removeClass('odd').hide().filter('.' + type).show().filter(':odd').addClass('odd'); return false; });
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; }
<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> <li class="php html"><a>PHP and HTML</a></li> <li class="php"><a>PHP</a></li> <li class="css"><a>CSS</a></li> <li class="js"><a>JavaScript</a></li> <li class="html"><a>HTML</a></li> <li class="php html"><a>PHP and HTML</a></li> <li class="php"><a>PHP</a></li> <li class="css"><a>CSS</a></li> <li class="js"><a>JavaScript</a></li> <li class="html"><a>HTML</a></li> <li class="php html"><a>PHP and HTML</a></li> <li class="php"><a>PHP</a></li> <li class="css"><a>CSS</a></li> <li class="js"><a>JavaScript</a></li> <li class="html"><a>HTML</a></li> </ul>