タブの切り替えコンテンツをふわっと表示する方法

基礎中の基礎かもしれませんが今日はタブの切り替えをCSSとJSで行う方法を
紹介します。

まずは結果から！

See the Pen タブの切り替えコンテンツをふわっと表示する方法 by sayuri (@giraffeweb) on CodePen.default

JSを読み込む

基本的なところではありますが、必ずJSを読みこんでおいてくださいね。
下記はCDNでひっぱってきてます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTMLソース

idやclass名は好きなものに変更してくださいね～。
[class=”topicon”]の中に書く内容は好きに編集いただいてOKです。
画像を羅列するなり、テーブルを入れるなりご自由に！

<div id="topics">
  <ul class="tab flexbox fw">
    <li class="select">TAB01</li>
    <li>TAB02</li>
  </ul>
  <!-- 切り替えのタブ -->

<div class="topicon">
            <div>
              <p>ここにTAB01の中身が入ります。</p>
            </div>
            <!-- tab01 -->
            
            <div class="hide">
              <p>ここにTAB02の中身が入ります。</p>
            </div>
 <!-- tab02 --> 
 </div>
  
   </div>

CSS

CSSも基本的には自由ですが、[.hide ]などの指定は忘れずに！
マルっとコピーしてもらって不要なところは削除するのが一番使い勝手いいかもです。


#topics {
		position: relative;
		z-index: 10;
    padding-top: 3vw;
	.hide {
		display:none;
	}
}

.tab{
	overflow:hidden;
	li{
    list-style: none;
		padding: 0 0 20px 0;
		margin-right:20px;
		flex: 1;
		text-align: center;
		border-bottom: 2px solid #ddd;
		font-weight: 600;
		letter-spacing: .05em;
		img {
			max-width: 80px;
			display: block;
			margin: 10px auto;
		}
		&:last-child {
			margin-right: 0;
		}
		&:hover {
			cursor: pointer;
			color: #000080;
		}
	}
	.select {
		border-bottom: 2px solid #000080;
		color: #000080;
	}
}

.topicon  {
	div {
    padding: 50px;
    p {
      line-height: 2;
      letter-spacing: .1em;
    }
	}
}

javascript

javascriptは上記HTMLで指定したクラスやIDにかならず変更してください。

$(function() {
	$('.tab li').click(function() {
		var index = $('.tab li').index(this);
		$('.topicon > div').css('display','none');
		$('.topicon > div').eq(index).fadeIn("slow");
		$('.tab li').removeClass('select');
		$(this).addClass('select')
	});
});

これで問題なく動くはずです✨
みなさんもお試しあれ～

Share: