jQueryでタブコンテンツを作ってみる。 - nicepaper @ ウィキ

見せたいコンテンツやテキストが縦方向にずらっと並んでいるとうんざりすることがありますよね？そんな中で、クリックさせたときにのみその部分を表示させるためにはタブのコンテンツをよく使用します。今日はjQueryでタブ型のコンテンツを作っていきたいと思います。7月10日記事

目次

用意するもの
HTMLとCSS
まとめ

用意するもの

jquery.min.js本体（今回はgoogleのcdnを利用）
reset.css（paddingやmargin等をリセットするCSSをどこからかとってきてください。）

HTMLとCSS

HTML部（reset.cssを読み込んでいます。resetするCSSを読み込んでください。）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>タブコンテンツ</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
	$('.tablist li').click(function() {
		var index = $('.tablist li').index(this);
		$('.textlist li').css('display','none');
		$('.textlist li').eq(index).css('display','block');
		$('.tablist li').removeClass('select');
		$(this).addClass('select')
	});
});
</script>
</head>
<body>
<div id="main">
<ul class="tablist">
    <li class="select" id="#tab1"><a href="#tab1">タブ見出し1</a></li>
    <li id="#tab2"><a href="#tab2">タブ見出し2</a></li>
    <li id="#tab3"><a href="#tab3">タブ見出し3</a></li>
    <li id="#tab4"><a href="#tab4">タブ見出し4</a></li>
    <li id="#tab5"><a href="#tab5">タブ見出し5</a></li>

</ul>
<ul class="textlist">
	<li>見出し1テキスト。見出し1テキスト。見出し1テキスト。見出し1テキスト。見出し1テキスト。見出し1テキスト。見出し1テキスト。見出し1テキスト。</li>
    <li class="hidden">見出し2テキスト。見出し2テキスト。見出し2テキスト。見出し2テキスト。見出し2テキスト。見出し2テキスト。見出し2テキスト。見出し2テキスト。</li>
    <li class="hidden">見出し3テキスト。見出し3テキスト。見出し3テキスト。見出し3テキスト。見出し3テキスト。見出し3テキスト。見出し3テキスト。見出し3テキスト。</li>
    <li class="hidden">見出し4テキスト。見出し4テキスト。見出し4テキスト。見出し4テキスト。見出し4テキスト。見出し4テキスト。見出し4テキスト。見出し4テキスト。</li>
    <li class="hidden">見出し5テキスト。見出し5テキスト。見出し5テキスト。見出し5テキスト。見出し5テキスト。見出し5テキスト。見出し5テキスト。見出し5テキスト。</li>
</ul>
</div>
</body>
</html>

CSS部

 @charset "utf-8";
 /* CSS Document */
 
 #main{
 	width:1000px;
 	min-height: 500px;
 	margin: 10px auto;
 	border: 1px solid #000;
 }
 .tablist{
 	overflow:hidden;
 	list-style:none;
 }
 .tablist li{
 	background:#FCC;
 	padding:5px 25px;
 	float:left;
 	margin-right:1px;
 }
 .tablist li a{
 	text-decoration:none;
 	color: #000;
 }
 .tablist li.select{
 	background:#F33;
 }
 .textlist li{
 	background:#FCC;
 	padding:20px;
 	list-style:none;
 	width: 800px;
 	border: 1px solid #F00;
 }
 .hidden {
 	display:none;
 }

すると次のような表示になります。
初期状態は以下