データをclassとjqueryで判定してカテゴリごとに絞り込みます。

たくさんのデータをカテゴリで絞り込み、表示・非表示します。

htmlソースは長いですが、表示要素を繰り返しているだけなので、メニューと要素部分の単純構造です。

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="tool.js"></script>

[tool.js]JavaScript

//check panel
jQuery(document).ready(function($){
$(function(){
	var btn =$(".mod_menu ul li a");	
  btn.click(function(){
	$(".mod_panellist_entry").css("display","none");

	$(btn).removeClass("current");
	$(this).addClass("current");

  //表示
  var id = $(this).attr("id");
  $(".mod_panellist_entry."+id).show("fast");
  });
 });
});

HTMl

<div class="mod_menu">
<ul class="ex_clearfix">
<li><a href="javascript:void(0)" class="current" id="all">すべてを表示</a></li>
<li><a href="javascript:void(0)" id="one">カテゴリ「壱」</a></li>
<li><a href="javascript:void(0)" id="two">カテゴリ「弐」</a></li>
<li><a href="javascript:void(0)" id="three">カテゴリ「参」</a></li>
<li><a href="javascript:void(0)" id="four">カテゴリ「肆」</a></li>
<li><a href="javascript:void(0)" id="five">カテゴリ「伍」</a></li>
</ul>
<!--mod_menu_end--></div>

<div class="mod_panellist ex_clearfix">
  
<div class="mod_panellist_entry all one">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「壱」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all two">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「弐」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all three">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「参」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all four">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「肆」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all five">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「伍」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all five">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「伍」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all four">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「肆」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all three">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「参」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all two">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「弐」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>

<div class="mod_panellist_entry all one">
<img src="img/cut_01.jpg" alt="画像" width="210" height="100" />
<div class="mod_panellist_entry_memo">
<dl>
<dt>カテゴリ「壱」</dt>
<dd>カテゴリーの説明や文章などが入るとか？</dd>
<dd class="title"><a href="#">タイトルやリンク</a></dd>
</dl>
<!-- mod_panellist_entry_memo_end --></div>
<!-- mod_panellist_entry_end --></div>


<!-- /mod_panellist --></div>

CSS

/* mod_menu
-----------------------------------------*/
.mod_menu{
 margin:10px 0 20px 0;
 width:700px;
 overflow:hidden;
}
.mod_menu ul{
 width:708px;
 margin:0 -8px 0 0;
}
.mod_menu ul li{
 float:left;
 width:108px;
 margin:0 8px 0 0;
 border:solid 1px #FF8000;
 text-align:center;
}
.mod_menu ul li a{
 display:block;
 height:40px;
 line-height:40px;
 background-color:#FFF;
}
.mod_menu ul li a:link.current    {color:#FFF; background-color:#FF8000;}
.mod_menu ul li  a:link    {color:#000; text-decoration:none; background-color:#FFF;}
.mod_menu ul li  a:visited {color:#000; text-decoration:none; background-color:#FFF;}
.mod_menu ul li  a:hover   {color:#FFF; text-decoration:none; background-color:#FF8000;}
.mod_menu ul li  a:active  {color:#000; text-decoration:none; background-color:#FFF;}
 
 

/* mod_panellist
-----------------------------------------*/
.mod_panellist{
 width:780px;
 margin:0 -10px 0 0;
}
.mod_panellist_entry {
 position:relative;
 float:left;
 width:210px;
 padding:8px;
 margin:0 10px 10px 0;
 border:solid 1px #CCCCCC;
}
.mod_panellist_entry_memo {
}
.mod_panellist_entry_memo dl dt{
 position:absolute;
 top:0px;
 left:0px;
 width:85px;
 height:25px;
 line-height:25px;
 font-size:90%;
 text-align:center;
 color:#FFF;
 background-color:#55AA00;
}
.mod_panellist_entry_memo dl dd{
 padding:5px 0 0 0;
 line-height:1.3;
 color:#666;
 font-size:90%;
}
.mod_panellist_entry_memo dl dd.title{
 padding:5px 0 0 0;
 font-weight:bold;
}