【jQuery】タブの切り替えメニューの実装方法

今回は、jQueryを使ってタブの切り替えメニューの実装方法を紹介します。

タブ切り替えはページの幅を取らずにコンテンツを切り替えることが出来るので、良くWEBサイトで使われている実装です。

【jQuery】タブの切り替えメニューの実装方法

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

試しにタブをクリックして表示が切り替わるか確認してみてください。

それではコードを見ていきましょう。

HTML

<div class="news-nav">
    <ul id="news-nav">
        <li class="tab is-active">カテゴリー1</li>
        <li class="tab">カテゴリー2</li>
        <li class="tab">カテゴリー3</li>
        <li class="tab">カテゴリー4</li>
        <li class="tab">カテゴリー5</li>
    </ul>
</div>

<section class="news-block is-show">
    <div id="news-block">
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>

        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

タブメニューと日付やタイトルといったコンテンツを実装します。

CSS

#news-nav {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#news-nav li {
    width: calc((100% / 5) - 10px);
    display: block;
    border-bottom: solid 2px #e0e0e0;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    color: #999;
    font-weight: bold;
    padding-bottom: 5px;
}

@media (max-width: 600px) {
    #news-nav li {
        width: auto;
        min-width: 85px;
        flex-shrink: 0;
        -webkit-flex-shrink: 0;
        border-bottom: solid 2px #e0e0e0;
        overflow: hidden;
        margin: 0 4px;
        line-height: 30px;
        padding: 0 5px;
        font-size: 13px;
    }
}
#news-nav li:hover {
    border-bottom: solid 6px #4C97BE;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
#news-nav .is-active {
    border-bottom: solid 6px #4C97BE;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
@media (max-width: 600px) {
    .news-nav {
        overflow-x: auto;
    }
    #news-nav {
        width: max-content;
        margin: 0 auto;
    }
}
.news-block__wrap {
    max-width: 1170px;
    margin: 0 auto;
}
.news-block__wrap dl {
    margin-top: 24px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
}
.news-block {
    display: none;
}
.news-block.is-show {
    display: block;
}
@media (max-width: 600px) {
    .news-block__wrap dl {
        flex-wrap: wrap;
    }
    .news-block__title {
        margin-top: 10px;
    }
}
.news-block__wrap dl dt {
    font-size: 12px;
    color: #666;

}
.news-block__wrap dl dd:first-child {
    font-size: 12px;
    min-width: 104px;
    padding-right: 10px;
}
.news-block__wrap dl dd span {
    width: 92px;
    text-align: center;
    color: #FFF;
    background: #666;
    padding: 3px 10px;
    display: inline-block;
    margin: 0 25px;
}
.news-block__wrap dl dd a {
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}
.news-block__wrap dl dd a:hover {
    text-decoration: underline;
}
.news-block__button {
    width: 240px;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    color: #666;
    background: #F9F9F9;
    font-size: 14px;
    padding: 14px 10px;
    margin: 30px auto 0;
    display: block;
    text-align: center;
    font-weight: bold;
    position: relative;
    line-height: 1.2;
    text-decoration: none;
}

タブメニュー切り替えに関する箇所を解説していきます。

◎40~45行目

「is-acrive」が付いたら、border線やフォントが濃くなるようにします。

◎65~70行目

news–blockに当たる要素は通常は表示せずに、「is-show」がついた時だけ表示するようにします。

jQuery

jQueryのCDNコードはこちら。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

そして、タブメニュー切り替えのコードはこちら。

jQuery(function($){
  $('.tab').click(function(){
    $('.is-active').removeClass('is-active');
    $(this).addClass('is-active');
    $('.is-show').removeClass('is-show');

    const index = $(this).index();

      $('.news-block').eq(index).addClass('is-show');
  });
});

タブメニューである「tab」をクリックすることで、つけたり外したり出来るようにしました。

そして「is-show」を使って表示を切り替えるようにしました。

まとめ

以上が、jQueryでタブの切り替えメニューの実装方法でした。

 

Yujiro

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

ブログ一覧へ戻る

Popular 人気のブログ

Webis Tech LABO. > 技術ブログ > JavaScript > jQuery > 【jQuery】タブの切り替えメニューの実装方法