html
<!--ここがタブ-->
<ul class="tab">
<li><a href="#tab1"><img src="https://placehold.jp/3d4070/ffffff/100x50.png?text=tab1" alt="tab1"></a></li>
<li><a href="#tab2"><img src="https://placehold.jp/d92b45/ffffff/100x50.png?text=tab2" alt="tab2"></a></li>
<li><a href="#tab3"><img src="https://placehold.jp/218a33/ffffff/100x50.png?text=tab3" alt="tab3"></a></li>
<li><a href="#tab4"><img src="https://placehold.jp/e09626/ffffff/100x50.png?text=tab4" alt="tab4"></a></li>
</ul>
<!--ここが切り替わる部分-->
<div class="content">
<div class="area" id="tab1">
Tab1テキストテキストテキストテキスト
</div>
<div class="area" id="tab2">
Tab2テキストテキストテキストテキスト
</div>
<div class="area" id="tab3">
Tab3テキストテキストテキストテキスト
</div>
<div class="area" id="tab4">
Tab4テキストテキストテキストテキスト
</div>
</div>
CSS
.tab, .tab li, .tab li a {
float: left;
padding:3px;
margin-right:2px;
list-style: none;
}
a:hover {
opacity: 0.8;
}
.content {
clear: both;
}
.area {
display: none;
}
jQuery
$(document).ready(function(){
$('.contents').hide(); //初期では非表示
$('.tab li').click(function() {
if($(this).hasClass('active')){
$('.area').hide();
$($(this).find('a').attr('href')).fadeOut();
$('.tab li').removeClass('active');
}else{
$('.tab li').removeClass('active');
$('.area').hide();
$($(this).find('a').attr('href')).fadeIn();
$(this).addClass('active');
}
})
});
(Visited 24 times, 1 visits today)