CSS/JSでおしゃれなタブを実装！

こちらを参考に、
おしゃれなタブ切り替えをポートフォリオサイトに実装しました。

タブをクリックすると、タブの下線が移動して切り替わる、非常にシンプルなタブです。
各タブの内容がディレイ表示されます。

##HTMLを記述

HTML

<h1>Lava lamp multiple tabs</h1>
<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'>Button 1</span>
    <span class='content2'>Button 2</span>
    <span class='content3'>Button 3</span>
    <div id='lamp' class='content1'></div>
  </div>
  <div class='tab-content'>
    
    <div class='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>
    
    <div class='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>
    
    <div class='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>
<div class='credit'>
</div>

tab-buttonsでタブに表示させる名前、
tab-contentでタブ内に表示させるコンテンツを表示しています。

##CSSを記述

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body{
  padding:0;
  margin:0;
  background:#fff;
}
h1{
  text-align:center;
  font:300 40px 'open sans',sans-serif;
  color:#666;
  text-transform:uppercase;
}
.tabs{
  width:50%;
  margin:10px auto;
  position:relative;
}
.tab-buttons span{
  font:400 14px 'open sans',sans-serif;
  color:#333;
  background:#eee;
  cursor:pointer;
  border-bottom:2px solid #ddd;
  display:block;
  width:33.3%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
}
.tab-content{
  border-bottom:3px solid #ddd;
  padding:15px;
  background:#eee;
  display:inline-block;
  font:400 13px 'open sans',sans-serif;
  color:#333;
}
#lamp{
  width:33.3%;
  height:2px;
  background:#333;
  display:block;
  position:absolute;
  top:40px;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content2{
  left:33.3%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content3{
  left:66.6%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content1{
  left:0;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}

自身のサイトに実装するときは、bodyあたりの記述はいったん削除しました。

##JavaScriptを記述

JavaScript

$('.tab-content>div').hide();
$('.tab-content>div').first().slideDown();
  $('.tab-buttons span').click(function(){
    var thisclass=$(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の読み込みをしていないと動かないのでそこだけ注意です◎