【HTML,CSS,JavaScript】簡単なタブを作成する方法

ここでは、シンプルなタブを作成する方法を解説します。

タブの作成は、既にWebサイトを準備していれば5分程度で終わるかと思います。

こういった方へ向けた記事です
①タブを追加する方法を知りたい
②タブを追加する方法の一例を知りたい
③タブを初めて作成しようとしている
目次
1.タブ完成イメージ
2.タブ作成方法

1.タブ完成イメージ

2.タブ作成方法

下記を参考にしてください。大事な箇所は赤い文字にしてあります。(※スマホだと赤くなっていないかもしれませんのでPC推奨)

HTML(ndex.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Tab Menu</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <ul class="menu">
      <li><a href="#" class="active" data-id="tab1">タブ1</a></li>
      <li><a href="#" data-id="tab2">タブ2</a></li>
      <li><a href="#" data-id="tab3">タブ3</a></li>
    </ul>

    <section class="content active" id="tab1">
      カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。
    </section>

    <section class="content" id="tab2">
      カシムラはプログラマ。カシムラはプログラマ。カシムラはプログラマ。
    </section>

    <section class="content" id="tab3">
      カシムラはエンジニア。カシムラはエンジニア。カシムラはエンジニア。カシムラはエンジニア。
    </section>
  </div>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS(styles.css)

body {
  font-size: 14px;
}

.container {
  margin: 30px auto;
  width: 500px;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu li a {
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 8px 0;
  color:#333;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}

/* クリックしたタブを紐付くcontentの背景色 */
.menu li a.active {
  background: #333;
  color: #fff;
}

/* ふわっと */
.menu li a:not(.active):hover {
  opacity: 0.5;
  transition: opacity 0.4s;
}

.content.active {
  background: #333;
  color: #fff;
  min-height: 150px;
  padding: 12px;
  display: block;
}

.content {
  display: none;
}

JavaScript(main.js)

'use strict';

{
  const menuItems = document.querySelectorAll('.menu li a');
  const contents = document.querySelectorAll('.content');

  menuItems.forEach(clickedItem => {
    clickedItem.addEventListener('click', e => {
      e.preventDefault();

      menuItems.forEach(item => {
        item.classList.remove('active');
      });
      clickedItem.classList.add('active');

      contents.forEach(content => {
        content.classList.remove('active');
      });

      document.getElementById(clickedItem.dataset.id).classList.add('active');
    });
  });
}

誰かの参考になれば幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中