※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

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

目次





用意するもの

  1. jquery.min.js本体(今回はgoogleのcdnを利用)
  2. 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;
 }

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

タブ2をクリックすれば?



まとめ

aタグでタブに対してのリンクを張っていき、リストに対しての挙動を指定することで作成が可能になります。

以上

添付ファイル