jQueryでタブ切替

前回のタブ切替とは違い今回は、jQueryを使ってタブの切替するスクリプトを作ってみました。

見た目は前回とあまり変わりませんがよりスムースで面白い切替になりました
このサイトの切替もこの方式に変更しました。

ますワードプレス用のスクリプトのソースはこちら

<script type="text/javascript">
jQuery(function( $ ) {
$(function() {
	$('.tab-demo').click(function() {
		var index = $('.tab-demo').index(this);
		$('.content-demo').css('display','none');
		$('.content-demo').eq(index).fadeIn(1000);
		$('.tab-demo').removeClass('select');
		$(this).addClass('select')
	});
        $(".tab-demo").hover(function(){
                $ (this).addClass("hover")
        },
        function(){
                $(this).removeClass("hover")
        });
});
});
</script>

jQuery(function( $ ) {

$(function() {

$('.tab-demo').click(function() {

var index = $('.tab-demo').index(this);

$('.content-demo').css('display','none');

$('.content-demo').eq(index).fadeIn(1000);

$('.tab-demo').removeClass('select');

$(this).addClass('select')

});

$(".tab-demo").hover(function(){

$ (this).addClass("hover")

function(){

$(this).removeClass("hover")

});

</script>

表示切替時のエフェクトは、ＤＥＭＯでは１秒フェードインに作ってますが、
７行目の.fadeIn()の部分を.slideDown()に変更する事でスライド表示になります。

CSSは、少し長いですが下のＤＥＭＯ用に作ってます

<style type='text/css'>
.tab-w{overflow:hidden;}
.tab-demo{
        width:80px;
        background:#ccc;
        float:left;
        list-style:none;
        padding:5px 0 3px 0;
        margin-right:2px;
        text-align:center;
        display:block;
        color:#FFF;
	border-radius: 12px 12px 0px 0px;
}

.tab-demo.hover{
	background:skyblue;
        cursor: pointer;
}
.select{
	background:blue;
	cursor:auto;
}
.select.hover{
	background:blue;
	cursor:auto;
}
.waku-demo{
        width:80%;
        border:blue 2px solid;
        background:#ccffff;
        padding:10px;
}
.content-demo{
        border: #aaa 1px solid;
        background: #fff;
        padding:10px;
}
.no-demo {
	display:none;
}
</style>

.tab-w{overflow:hidden;}

.tab-demo{

width:80px;

background:#ccc;

float:left;

list-style:none;

padding:5px 0 3px 0;

margin-right:2px;

text-align:center;

display:block;

color:#FFF;

border-radius: 12px 12px 0px 0px;

}

.tab-demo.hover{

background:skyblue;

cursor: pointer;

}

.select{

background:blue;

cursor:auto;

}

.select.hover{

background:blue;

cursor:auto;

}

.waku-demo{

width:80%;

border:blue 2px solid;

background:#ccffff;

padding:10px;

}

.content-demo{

border: #aaa 1px solid;

background: #fff;

padding:10px;

}

.no-demo {

display:none;

}

</style>

HTMLソースです、タブとコンテンツは上から順番に自動認識します。

<div class="tab-w">
	<div class="tab-demo select">タブ1</div>
	<div class="tab-demo">タブ2</div>
	<div class="tab-demo">タブ3</div>
	<div class="tab-demo">タブ4</div>
</div>
<div class="waku-demo">
	<div class="content-demo">コンテンツ１</div>
	<div class="content-demo no-demo">コンテンツ２</div>
	<div class="content-demo no-demo">コンテンツ３</div>
	<div class="content-demo no-demo">コンテンツ４</div>
</div>