【JavaScript】タブメニューの作成方法。コピペOKです。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、タブメニューを JavaScript で作成してみます。Jquery ではないですよ。
見た目はシンプルなものを作っています。ただ、コードが無理矢理感があるので、改良の余地はありますね。
href と id が同じなので、if でなんとかできそうですが、一旦アウトプットです。

HTMLです。【JavaScript】タブメニューの作成方法。コピペOKです。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="tab">
    <li><a href="#lunch">ランチ</a></li>
    <li><a href="#drink">ドリンク</a></li>
    <li><a href="#dinner">ディナー</a></li>
  </ul>
  <div id="lunch" class="area">
    <h2>ランチ</h2>
    <ul>
      <li>ランチ1</li>
      <li>ランチ2</li>
      <li>ランチ3</li>
    </ul>
  </div>
  <div id="drink" class="area">
    <h2>ドリンク</h2>
    <ul>
      <li>ドリンク1</li>
      <li>ドリンク2</li>
      <li>ドリンク3</li>
    </ul>
  </div>
  <div id="dinner" class="area">
    <h2>ディナー</h2>
    <ul>
      <li>ディナー1</li>
      <li>ディナー2</li>
      <li>ディナー3</li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSSです。【JavaScript】タブメニューの作成方法。コピペOKです。


@charset "utf-8";

body {
  width: 500px;
  margin-top: 200px;
  margin-left: 500px;
  background-color: #888;
}

li {
  list-style: none;
}

.tab {
  display: flex;
  flex-wrap: wrap;
}
.tab li a {
  display: block;
  margin: 0 2px;
  padding: 10px 20px;
  background: #ddd;
}
/* activeクラスが追加されたときの形状 */
.tab a.active {
  background: #fff;
}

.area {
  display: none;
  padding: 50px 20px;
  background: #fff;
  transition: .5s;
  opacity: 0;
}
.area.is-active {
  display: block;
  animation-name: displayAnime; /* ふわっと表示するアニメーション */
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes displayAnime { /* cssを調整 */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScriptです。【JavaScript】タブメニューの作成方法。コピペOKです。


'use strict';

{
  const tabLunch = document.getElementsByClassName('tab')[0].children[0].getElementsByTagName('a')[0];
  const tabDrink = document.getElementsByClassName('tab')[0].children[1].getElementsByTagName('a')[0];
  const tabDinner = document.getElementsByClassName('tab')[0].children[2].getElementsByTagName('a')[0];
  const lunch = document.getElementById('lunch');
  const drink = document.getElementById('drink');
  const dinner = document.getElementById('dinner');

  tabLunch.addEventListener('click', () => {
    tabLunch.classList.add('active');
    tabDrink.classList.remove('active');
    tabDinner.classList.remove('active');
    lunch.classList.add('is-active');
    drink.classList.remove('is-active');
    dinner.classList.remove('is-active');
  });
  tabDrink.addEventListener('click', () => {
    tabLunch.classList.remove('active');
    tabDrink.classList.add('active');
    tabDinner.classList.remove('active');
    lunch.classList.remove('is-active');
    drink.classList.add('is-active');
    dinner.classList.remove('is-active');
  });
  tabDinner.addEventListener('click', () => {
    tabLunch.classList.remove('active');
    tabDrink.classList.remove('active');
    tabDinner.classList.add('active');
    lunch.classList.remove('is-active');
    drink.classList.remove('is-active');
    dinner.classList.add('is-active');
  });
  
}