52日目 | web制作

本日は…

■タブ形式で表示するためのjQueryを作成
基本的に項目をそれぞれ
・見出しのul
・中身のul
という形で記述して、見出しのクリックをするごとに中身のulを連動させて見えるようにする

<ul class="title">
<li><a href="#tab1" class="select">１</a></li>
<li><a href="#tab2">２</a></li>
<li><a href="#tab3">３</a></li>
<li><a href="#tab4">４</a></li>
<li><a href="#tab5">５</a></li>
</ul>
<ul class="content">
<li id="tab1">サンプルテキストサンプルテキストサンプルテキスト</li>
<li id="tab2" class="hide">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
<li id="tab3" class="hide">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
<li id="tab4" class="hide">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
<li id="tab5" class="hide">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
</ul>

→titleの方のliをフロートにして横に並べる
以下css

body, div, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
width: 500px;
margin: 50px auto;
}
ul.title li {
list-style:none;
width: 100px;
height: 40px;
float: left;
}
ul.title li a {
outline: none;
border-bottom: 1px solid #333;
background: #ccc;
display: block;
color: #900;
line-height:40px;
text-align: center;
}
ul.title li a.select{
background: #fff;
text-decoration: none;
color: #333;
border: 1px solid #333;
border-bottom: none;
border-radius: 5px 5px 0 0;
}
ul.content {
clear:both;
border: 1px solid #333;
border-top: 0;
padding: 0;
width: 498px;
border-radius: 0 0 5px 5px;
}
ul.content li{
list-style: none;
padding: 10px;
text-indent: 1em;
color: #666;
height: 200px;
line-height: 1.6;
}
.hide {
display: none;
}

cssの設定は、上記フロートの設定と、.hideのdisplay:none;が大事。

以下、jQuery

$(function() {
	$('.title li').click(function() {
		var index = $('.title li').index(this);
		$('.content li').css('display','none';);
		$('.content li').eq(index).css('display','block');
		$('.title li').removeClass('select');
		$(this).addClass('select')
	});
});

※教科書とは少し変えてある。よってCSSも少し違う
クリックされたtitleのliが何番目であるかを変数に格納して、
同じ番目のcontentのliに対して命令をする、という構造。

実際動くのはこちら

■昨日のヨコ型アコーディオン
実際動くとこんな感じ