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

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

    はじめに

    本記事について

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

    当サイトで公開している「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
    コンテンツ1
    コンテンツ2
    コンテンツ3
    クラス名
    rw-tab-vertical
    説明
    • シンプルなタブ切り替え、縦並び版
    • 複数設置可
    • レイアウトクラスrw-row-flexrw-l-box-layoutを利用
    • 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-vertical rw-row-flex rw-l-box-layout">
        <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-vertical {
    	margin-top:30px;
    	display:flex;
    }
    .rw-tab-vertical.rw-row-flex.rw-l-box-layout > *:first-child {
    	flex-basis:20%;
    	min-width:100px;
    }
    .rw-tab-vertical > ul{
    	display: block;
    	border:1px solid #eee;
    	border-right:0;
    }
    .rw-tab-vertical > ul > li{
    	padding:5px;
    	list-style:none;
    	border-bottom:solid 1px #eee;
    	text-align:center;
    	cursor:pointer;
    }
    .rw-tab-vertical > ul > li:last-child {
    	border-bottom:0;
    }
    
    .rw-tab-vertical > .rw-tab-item {
    	border:solid 1px #eee;
    	background-color:#fff;
    }
    
    .rw-tab-vertical .rw-tab-item > div{
    	display:none;
    }
    .rw-tab-vertical > ul > li.active{
    	background-color:#1a73e8;
    	border-color:#1a73e8;
    	color:#FFF;
    	transition: all .2s;
    }
    .rw-tab-vertical .rw-tab-item > .show{
    	display:block;
    }
    /* */
    .rw-row-flex{
    	display: flex;
    	justify-content: flex-start;
    	flex-wrap: wrap;
    }
    .rw-row-flex.rw-l-box-layout > *:last-child {
    	flex-basis:auto;
    	flex:1;
    }
    
    
    $('.rw-tab-vertical > ul > li').click(function(){
    	const tab = $(this).parents('.rw-tab-vertical'); 
    	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

    更新履歴

    更新日時 更新内容
    2019.10.21 記事を作成。