上毛印刷株式会社

【JavaScript】タブをクリックして表示を切り替える

子ブログ

タグ

年別

【JavaScript】タブをクリックして表示を切り替える

2024年11月19日
WEBサイト制作
  • #HTML
  • #css
  • #JavaScript
  • #tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は非常に使用頻度が高いタブ切り替えを紹介します！
ぜひ参考にしてください！

実装例

  • 2024年10月21日
    カテゴリ
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • 2024年06月28日
    カテゴリ
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • 2024年06月27日
    カテゴリ
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • 2024年04月12日
    カテゴリ
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • 2024年04月10日
    カテゴリ
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

HTML例

<div class="c-newsBlock">
  <ul class="c-newsTab">
    <li class="c-newsTab__item">
      <a class="js-tab js-tab-active" data-sort="js-tab1">すべて</a>
    </li>
    <li class="c-newsTab__item">
      <a class="js-tab" data-sort="js-tab2">カテゴリ1</a>
    </li>
    <li class="c-newsTab__item">
      <a class="js-tab" data-sort="js-tab3">カテゴリ2</a>
    </li>
  </ul>
  <div class="c-newsContent" id="js-news1">
    <ul class="c-newsList">
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年10月21日</div>
        <div class="c-newsList__cat c-newsList__cat--info">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年06月28日</div>
        <div class="c-newsList__cat c-newsList__cat--text">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年06月27日</div>
        <div class="c-newsList__cat c-newsList__cat--sale">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年04月12日</div>
        <div class="c-newsList__cat c-newsList__cat--sale">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年04月10日</div>
        <div class="c-newsList__cat c-newsList__cat--info">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
    </ul>
    </div>
    <div class="c-newsContent" id="js-news2" style="display: none;">
    <ul class="c-newsList">
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年06月28日</div>
        <div class="c-newsList__cat c-newsList__cat--text">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年03月29日</div>
        <div class="c-newsList__cat c-newsList__cat--text">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年03月28日</div>
        <div class="c-newsList__cat c-newsList__cat--text">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年03月27日</div>
        <div class="c-newsList__cat c-newsList__cat--text">カテゴリ</div>
        <div class="c-newsList__content"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年03月27日</div>
        <div class="c-newsList__cat c-newsList__cat--text">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
    </ul>
    </div>
    <div class="c-newsContent" id="js-news3" style="display: none;">
    <ul class="c-newsList">
      <li class="c-newsList__item">
        <div class="c-newsList__date">2024年02月01日</div>
        <div class="c-newsList__cat c-newsList__cat--pack">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2023年11月09日</div>
        <div class="c-newsList__cat c-newsList__cat--pack">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2023年10月16日</div>
        <div class="c-newsList__cat c-newsList__cat--pack">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2023年10月06日</div>
        <div class="c-newsList__cat c-newsList__cat--pack">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
      <li class="c-newsList__item">
        <div class="c-newsList__date">2023年07月06日</div>
        <div class="c-newsList__cat c-newsList__cat--pack">カテゴリ</div>
        <div class="c-newsList__content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </li>
    </ul>
  </div>
</div>

CSS例

.c-newsBlock {
  border-radius: 10px;
  overflow: hidden;
  max-width: 1000px;
  margin: auto;
}
.c-newsBlock li{
  list-style: none;
}
.c-newsBlock a{
  text-decoration: none;
  color: #333;
}
.c-newsTab {
  display: flex;
  padding: 0;
  border-bottom: 2px solid #e62333;
}
.c-newsTab__item {
  width: calc(100% / 3);
  height: 54px;
  margin: 0 2px 0 0;
}
.c-newsTab__item a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #000;
  background-color: #f0f0f0;
}
.c-newsTab__item a.js-tab-active {
  background-color: #e62333;
  color: #fff;
}
.c-newsTab__item:last-of-type {
  margin: 00px;
}
.c-newsList__cat--net {
  background-color: #00c83c;
}
.c-newsList__cat--info {
  background-color: #a0a0a0;
}
.c-newsList__cat--text {
  background-color: #c878c8;
}
.c-newsList__cat--pack {
  background-color: #00a0c8;
}
.c-newsList__cat--sale {
  background-color: #ff9696;
}
.c-newsList {
  margin: 0 0 40px;
}
.c-newsList__item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: 0.4s ease;
  padding: 23px 30px 23px 0;
}
.c-newsList__item:hover {
  opacity: 0.7;
}
.c-newsList__date {
  min-width: 115px;
  margin: 0 15px 0 0;
  font-size: 14px;
}
.c-newsList__cat {
  width: 110px;
  min-width: 110px;
  height: 24px;
  padding: 2px 0 0;
  margin: 0 30px 0 0;
  font-size: 12px;
  display: flex;
  color: #fff;
  align-items: baseline;
  justify-content: center;
}
.c-newsList__content {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.c-newsList__new {
  min-width: 42px;
  height: 24px;
  font-size: 12px;
  margin: 0 10px 0 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e62333;
}
#js-news2,
#js-news3 {
  display: none;
}

JavaScript例

.document.addEventListener('click', function (event) {
  if (event.target.classList.contains('js-tab')) {
    var catBox = event.target.getAttribute('data-sort');
    var allLinks = document.querySelectorAll('.c-newsTab__item a');
    var allContents = document.querySelectorAll('.c-newsContent');
    allLinks.forEach(function (link) {
      link.classList.remove('js-tab-active');
    });
    allContents.forEach(function (content) {
      content.style.display = 'none';
    });
    switch (catBox) {
      case 'js-tab1':
        document.querySelector('.c-newsTab__item:nth-of-type(1) a').classList.add('js-tab-active');
        document.getElementById('js-news1').style.display = 'block';
        break;
      case 'js-tab2':
        document.querySelector('.c-newsTab__item:nth-of-type(2) a').classList.add('js-tab-active');
        document.getElementById('js-news2').style.display = 'block';
        break;
      case 'js-tab3':
        document.querySelector('.c-newsTab__item:nth-of-type(3) a').classList.add('js-tab-active');
        document.getElementById('js-news3').style.display = 'block';
        break;
      default:
        break;
    }
  }
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！

WEB制作担当ソーヤ

ソーヤ

上毛印刷WEB制作担当
前職は東証プライム企業の本社WEB受託チームにてフロントエンドエンジニアを３年経験。


この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。

    お名前必須
    メールアドレス必須
    お問い合わせ内容必須

    関連記事

    ブログ一覧へ
    Copyright © Jomo Printing Co.,Ltd.All rights reserved.
    PAGE TOP