前回のタブ切替とは違い今回は、jQueryを使ってタブの切替するスクリプトを作ってみました。
見た目は前回とあまり変わりませんがよりスムースで面白い切替になりました
このサイトの切替もこの方式に変更しました。
【 ↓ DENO操作はこちら ↓ 】
ますワードプレス用のスクリプトのソースはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
表示切替時のエフェクトは、DEMOでは1秒フェードインに作ってますが、
7行目の.fadeIn()の部分を.slideDown()に変更する事でスライド表示になります。
CSSは、少し長いですが下のDEMO用に作ってます
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<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> |
HTMLソースです、タブとコンテンツは上から順番に自動認識します。
1 2 3 4 5 6 7 8 9 10 11 12 |
<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">コンテンツ1</div> <div class="content-demo no-demo">コンテンツ2</div> <div class="content-demo no-demo">コンテンツ3</div> <div class="content-demo no-demo">コンテンツ4</div> </div> |
DEMO
タブ1
タブ2
タブ3
タブ4
DENO用のタブです。
・jQueryを使用したタブのDEMOを作ってみました。
・DEMOですのでここのコンテンツ内容は気にしないように・・・
・コンテンツ中身意外は上記のソースそのままでのDEMOです。

シンデレラ~~~