【jQuery】使いやすくシンプルなタブを作る方法

タブデザイン

タブを使うメリット

情報が多い場合は、一覧にして表示すると分かりづらいというときにタブを使うことで使いやすくなり見やすくなります。

またタブにすることで高さを削ることができるので無駄なスクロールを省くことができます。

タブを使うデメリット

タブの数が多すぎたりよく使いされたりする場合に崩れの原因になったりたくさんありすぎて見られなくなるというでデメリットもあります。

jQueryを使ってシンプルなタブを作る方法

html

<div class="tab">
        <ul class="tab-btn">
                <li>タブメニュー1</li>
                <li>タブメニュー2</li>
                <li>タブメニュー3</li>
                <li>タブメニュー4</li>
        </ul>
        <div class="tab-cont">
                <div style="display: block;">タブメニュー1のテキスト</div>
                <div>タブメニュー2のテキスト</div>
                <div>タブメニュー3のテキスト</div>
                <div>タブメニュー4のテキスト</div>
        </div>  
</div>

css

.tab{width: 500px; margin: 0 auto;}     
.tab-btn{
        font-size: 0;
        width: 100%;
	margin: 0;
	padding: 0;
}
.tab-btn li {
        width: 25%;
        cursor: pointer;
        display: inline-block;
        padding: 10px 15px;
        margin-right: -1px;
        border: solid 1px #ccc;
        border-radius: 8px 8px 0 0;
        font-size: 13px;
        background: #fff;
        box-sizing: border-box;
        text-align: center;
}
.tab-btn li.tab-on {background: #ccc;}
.tab .tab-cont > div {
        padding: 20px 0;
        display: none;
}

jQuery

jQuery(function () {
    jQuery('.tab .tab-btn > li:first-child').addClass('tab-on');
    jQuery('.tab .tab-cont > div:first-child').show();

        jQuery('.tab .tab-btn > li').click(function() {
                        var index = jQuery('.tab .tab-btn li').index(this);
                        jQuery('.tab .tab-btn > li').removeClass('tab-on');
                        jQuery('.tab .tab-cont > div').hide();
                        jQuery('.tab .tab-cont > div').eq(index).show();
                        jQuery(this).addClass('tab-on');
        });
});

2行目と3行目でタブの1個目とタブのコンテンツをアクティブにします。

5行目からはタブがクリックされたときの処理になります。

タブデザインのサンプル