「jQueryでタブコンテンツを作ってみる。」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
見せたいコンテンツやテキストが縦方向にずらっと並んでいるとうんざりすることがありますよね？そんな中で、クリックさせたときにのみその部分を表示させるためにはタブのコンテンツをよく使用します。今日はjQueryでタブ型のコンテンツを作っていきたいと思います。7月10日記事
~
~
目次
#contents
~
~
----
~
*用意するもの
+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;
}
すると次のような表示になります。
~
初期状態は以下
#image(width=400,001.png)
タブ2をクリックすれば？
#image(width=400,002.png)
~
~
*まとめ
aタグでタブに対してのリンクを張っていき、リストに対しての挙動を指定することで作成が可能になります。
~
~
以上
見せたいコンテンツやテキストが縦方向にずらっと並んでいるとうんざりすることがありますよね？そんな中で、クリックさせたときにのみその部分を表示させるためにはタブのコンテンツをよく使用します。今日はjQueryでタブ型のコンテンツを作っていきたいと思います。7月10日記事
~
~
目次
#contents
~
~
----
~
*用意するもの
+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;
}
すると次のような表示になります。
~
初期状態は以下
#image(width=500,001.png)
タブ2をクリックすれば？
#image(width=500,002.png)
~
~
*まとめ
aタグでタブに対してのリンクを張っていき、リストに対しての挙動を指定することで作成が可能になります。
~
~
以上
