nicepaper @ ウィキ
nicepaper @ ウィキ

メニューを選択するリストがあり、そのリストのコンテンツをすべて表示と個別表示とで表示内容に分けるタブ的な機能をもつプログラムをjQuery作っていきたいと思います。2015年7月16日記事

イメージ1（はじめはすべて表示）

イメージ2（個別をクリックすると、個別のものがあらわれる）

イメージ3（すべて表示を再び押すともう一度すべて表示に戻る。）


目次




設計思想

  1. 初期状態はすべて表示（すべて表示のボタンのclassに.selectedをつけておく）
  2. 個別のものを押すと個別のものだけのコンテンツがあらわれ、以前につけられていたCSSのselectedを削除し、選択したものにCSSのselected付け加える
  3. 再びすべて表示を押した場合にでも対応できるようにしておく。

コード

HTML部 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
	//すべてを選択した場合、.menulistのselectedを削除し、contentsをdisplay:blockにしてallにselectedを追加
	$('.all').click(function() {
		$('.menulist').removeClass('selected');
		$(this).addClass('selected');
		$('.contents').css('display','block');
	});
	//対象のものを選択した場合、display:blockにしてselectedを追加し、他のものと.allをdisplay:noneにする。
	$('.menulist').click(function() {
		$('.menulist').removeClass('selected');
		$('.all').removeClass('selected');
		$(this).addClass('selected');
		var index = $('.menulist').index(this);
		$('.contents').css('display','none');
		$('.contents').eq(index).css('display','block');

	});

});
</script>
<title>メニューリスト</title>
</head>
<body>
<div id="menu" id="tab">
    <dl>
        <dt>すべて</dt>
        <dd>
            <ul>
                <li class="all selected"><a href="#tab">すべて表示</a></li>
            </ul>
        </dd>
        <dt>大カテゴリ1</dt>
        <dd>
            <ul>
                <li class="menulist"><a href="#tab">小カテゴリ1</a></li>
                <li class="menulist"><a href="#tab">小カテゴリ2</a></li>
                <li class="menulist"><a href="#tab">小カテゴリ3</a></li>
            </ul>
        </dd>
        <dt>大カテゴリ2</dt>
        <dd>
            <ul>
                <li class="menulist"><a href="#tab">小カテゴリ4</a></li>
                <li class="menulist"><a href="#tab">小カテゴリ5</a></li>
                <li class="menulist"><a href="#tab">小カテゴリ6</a></li>
            </ul>
        </dd>
    </dl>
	</div>
    <div class="contents">
        <p>小カテゴリ1の内容</p>
    </div>
    <div class="contents">
        <p>小カテゴリ2の内容</p>
    </div>
    <div class="contents">
        <p>小カテゴリ3の内容</p>
    </div>
    <div class="contents">
        <p>小カテゴリ4の内容</p>
    </div>
    <div class="contents">
        <p>小カテゴリ5の内容</p>
    </div>
    <div class="contents">
        <p>小カテゴリ6の内容</p>
    </div>
</div>
</body>
</html>

CSS部 


@charset "utf-8";
/* CSS Document */


#menu{
	margin: 10px auto;
	width: 800px;
	height: 180px;
	border: 1px solid #000;
}
#menu dt{
	float:left;
	clear:both;
	width: 100px;
	background: #f00;
	text-align:center;
	padding: 9px 9px;
	margin:3px;
}
#menu dd{
	float:left;
	background: #EEEEEE;
}
#menu ul{
	width:600px;
}
#menu li{
	display:inline-block;
	padding: 9px 9px;
	margin:3px;
}
.all{
	background: #FF0;	
}
.menulist{
	background: #FF0;
}
.contents{
	margin:10px auto;
	width:800px;
	height:200px;
	border:1px solid #000;
}
.selected{
	background: #0FF;
}

まとめ

jQueryオブジェクト（ボタンが押されたときの処理）を二つ作っておき、一つはすべて用、一つは個別用のプログラムを書くことで対応できると思います。

以上

「jQueryですべて表示（全部表示）と個別表示のタブ的なメニューを作る」をウィキ内検索
最終更新：2015年07月16日 10:27
添付ファイル