シンプルなタブメニュー
Result
jQuery
$(document).ready(function() {
//最初に表示するコンテンツ
$('.area:first').show();
//class="active"を追加
$('.tab li:first').addClass('active');
//クリックイベント
$('.tab li').click(function() {
$('.tab li').removeClass('active');
$(this).addClass('active');
$('.area').hide();
$($(this).find('a').attr('href')).fadeIn();
return false;
});
});
css
.tab, .tab li, .tab li a {
float: left;
padding:3px;
margin-right:2px;
}
.content {
clear: both;
overflow: hidden;
width: 300px;
border:1px solid #eee;
height:300px;
}
.area {
display: none;
}
.tab li.active {
background: #eee;
}
.tab li.active a{
color:red;
}
html
<ul class="tab">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>
</ul>
<div class="content">
<div class="area" id="tab1">
Tab1<br />Tab1<br />Tab1<br />Tab1<br />
</div>
<div class="area" id="tab2">
Tab2<br />Tab2<br />Tab2<br />Tab2<br />
</div>
<div class="area" id="tab3">
Tab3<br />Tab3<br />Tab3<br />Tab3<br />
</div>
<div class="area" id="tab4">
Tab4<br />Tab4<br />Tab4<br />Tab4<br />
</div>
</div>