こちらを参考に、
おしゃれなタブ切り替えをポートフォリオサイトに実装しました。
タブをクリックすると、タブの下線が移動して切り替わる、非常にシンプルなタブです。
各タブの内容がディレイ表示されます。
HTMLを記述
HTML
<h1>Lava lamp multiple tabs</h1><divclass='tabs'><divclass='tab-buttons'><spanclass='content1'>Button 1</span><spanclass='content2'>Button 2</span><spanclass='content3'>Button 3</span><divid='lamp'class='content1'></div></div><divclass='tab-content'><divclass='content1'>
This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.
</div><divclass='content2'>
This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.
</div><divclass='content3'>
This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.
</div></div></div><divclass='credit'></div>tab-buttonsでタブに表示させる名前、tab-contentでタブ内に表示させるコンテンツを表示しています。
CSSを記述
CSS
@importurl(https://fonts.googleapis.com/css?family=Open+Sans:400,300);body{padding:0;margin:0;background:#fff;}h1{text-align:center;font:30040px'open sans',sans-serif;color:#666;text-transform:uppercase;}.tabs{width:50%;margin:10pxauto;position:relative;}.tab-buttonsspan{font:40014px'open sans',sans-serif;color:#333;background:#eee;cursor:pointer;border-bottom:2pxsolid#ddd;display:block;width:33.3%;float:left;text-align:center;height:40px;line-height:40px;}.tab-content{border-bottom:3pxsolid#ddd;padding:15px;background:#eee;display:inline-block;font:40013px'open sans',sans-serif;color:#333;}#lamp{width:33.3%;height:2px;background:#333;display:block;position:absolute;top:40px;transition:all.3sease-in;-o-transition:all.3sease-in;-webkit-transition:all.3sease-in;-moz-transition:all.3sease-in;}#lamp.content2{left:33.3%;transition:all.3sease-in;-o-transition:all.3sease-in;-webkit-transition:all.3sease-in;-moz-transition:all.3sease-in;}#lamp.content3{left:66.6%;transition:all.3sease-in;-o-transition:all.3sease-in;-webkit-transition:all.3sease-in;-moz-transition:all.3sease-in;}#lamp.content1{left:0;transition:all.3sease-in;-o-transition:all.3sease-in;-webkit-transition:all.3sease-in;-moz-transition:all.3sease-in;}自身のサイトに実装するときは、bodyあたりの記述はいったん削除しました。
JavaScriptを記述
JavaScript
$('.tab-content>div').hide();$('.tab-content>div').first().slideDown();$('.tab-buttons span').click(function(){varthisclass=$(this).attr('class');$('#lamp').removeClass().addClass('#lamp').addClass(thisclass);$('.tab-content>div').each(function(){if($(this).hasClass(thisclass)){$(this).fadeIn(800);}else{$(this).hide();}});});まとめ
Javascriptの記述が簡単なので、とても簡単に実装できました！
jQueryの読み込みをしていないと動かないのでそこだけ注意です◎