タブ切り替え – サンプル集

https://www.rural-web.com/coding/2584

2019/10/21

はじめに

本記事について

本記事は、【タブ切り替え】を実装するためのサンプル集です。
利用できる方は、お好きに活用してください。

当サイトで公開している「ruralweb.css（準備中）」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

検証ブラウザ・OS

サンプル内容につきましては、最新ブラウザ・OS（IE/Chrome/Safari/FireFox/iOS/Android）で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

注意事項

自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたらTwitterよりご連絡ください。

コードサンプル

ベーシックタイプ

基本型

タブ1
タブ2
タブ3

コンテンツ1

コンテンツ2

コンテンツ3

クラス名

rw-tab-basic

説明

シンプルなタブ切り替え
複数設置可
jquery読み込み必須（ここでは3.3.1を利用）

コードを表示

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="rw-tab-basic">
    <ul>
        <li class="active">タブ1</li>
        <li>タブ2</li>
        <li>タブ3</li>
    </ul>
    <div class="rw-tab-item">
        <div class="show">コンテンツ1</div>
        <div>コンテンツ2</div>
        <div>コンテンツ3</div>
    </div>
</div>

.rw-tab-basic {
	margin-top:30px;
}

.rw-tab-basic > ul{
	display: flex;
	justify-content: center;
}
.rw-tab-basic > .rw-tab-item {
	border:solid 1px #eee;
	border-top:none;
	background-color:#fff;
}

.rw-tab-basic > ul > li{
	flex-grow: 1;
	padding:5px;
	list-style:none;
	border:solid 1px #eee;
	text-align:center;
	cursor:pointer;
}
.rw-tab-basic .rw-tab-item > div{
	display:none;
}
.rw-tab-basic > ul > li.active{
	background-color:#1a73e8;
	border-color:#1a73e8;
	color:#FFF;
	transition: all .2s;
}
.rw-tab-basic .rw-tab-item > .show{
	display:block;
}


$('.rw-tab-basic > ul > li').click(function(){
	const tab = $(this).parents('.rw-tab-basic'); 
	tab.find('.active').removeClass('active');
	$(this).addClass('active');
	tab.find('.show').removeClass('show');
	const index = $(this).index();
	tab.find(".rw-tab-item > div").eq(index).addClass('show');
});

最終更新：2019.10.21

基本型：縦並び

タブ1
タブ2
タブ3