ドットインストールのJavaScriptでタブメニューを作ろうを参考に作りました。

ホバーした際に、メニューにactiveクラスがつくようにjavascriptを書きました。activeクラスがつくといくつかのcssが適応され、タブが表示されるようになります。

カーソルを隣のメニューに移動した際のtransitionはつけられたのですが、hiddenクラスで隠していたタブが表示される際のtransitionがうまくできません。
そのためホバーした瞬間にタブだけ変わるので、メニューとの誤差が生まれてしまいます。

解決方法をどなたか教えていただけると有り難いです。

##試したこと
activeクラスや、tabContentクラスに transition:0.4s; と書きましたが、適応されませんでした。

menuの方は問題なく適応されているので、javascriptのmouseover処理でクラスをつけている事が原因かと思っています。

その場合ホバーした直後にクラスをつけるのではなく、時間差でクラスをつけるようにすれば良いのかと思ったのですが、どのように書くのかがわかりませんでした。そもそもそれが可能かもわからないので質問させていただきました。

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <link rel="stylesheet" href="css/style.css" />
8    <title>TabMenu</title>
9  </head>
10  <body>
11    <div class="menuContainer">
12      <ul class="menu">
13        <li><a href="#" data-id="about">サイトの概要</a></li>
14        <li><a href="#" data-id="service">サービス内容</a></li>
15        <li><a href="#" data-id="contact">お問い合わせ</a></li>
16        <!-- data-idというのはidと紐付けるためのカスタムデータ属性 -->
17      </ul>
18
19      <section class="tabContent" id="about">
20        サイトの概要。 サイトの概要。 サイトの概要。 サイトの概要。
21        サイトの概要。 サイトの概要。
22      </section>
23      <section class="tabContent" id="service">
24        サービス内容。 サービス内容。 サービス内容。 サービス内容。
25        サービス内容。 サービス内容。
26      </section>
27      <section class="tabContent" id="contact">
28        お問い合わせ。 お問い合わせ。 お問い合わせ。 お問い合わせ。
29        お問い合わせ。 お問い合わせ。
30      </section>
31    </div>
32    <script src="js/main.js"></script>
33  </body>
34</html>
35
36

CSS
1
2body {
3  font-size: 14px;
4}
5
6.menuContainer {
7  margin: 30px auto;
8  width: 500px;
9}
10
11.menu {
12  list-style: none;
13  padding: 0;
14  margin: 0;
15  display: flex;
16}
17
18.menu li a {
19  display: inline-block;
20  width: 100px;
21  text-align: center;
22  padding: 8px 0;
23  color: #333;
24  text-decoration: none;
25  border-radius: 4px 4px 0 0;
26  transition: 0.4s;
27}
28
29.menu li a.active {
30  background: #333;
31  color: #fff;
32}
33.menu li a:not(.active):hover {
34  /* aのactiveでないものをホバーしたとき */
35  opacity: 0.5;
36  transition: opacity 0.4s;
37}
38.tabContent.active {
39  background: #333;
40  color: #fff;
41  min-height: 150px;
42  padding: 12px;
43  display: block;
44}
45.tabContent {
46  display: none;
47}
48
49

JavaScript
1
2"use strict";
3
4{
5  const menuItems = document.querySelectorAll(".menu li a");
6//メニュー項目
7
8  const tabContents = document.querySelectorAll(".tabContent");
9//メニューのタブに表示される内容
10
11
12  menuItems.forEach((mouseoverItem) => {
13    mouseoverItem.addEventListener("mouseover", (e) => {
14      e.preventDefault();
15      menuItems.forEach((item) => {
16        item.classList.remove("active");
17      });
18      mouseoverItem.classList.add("active");
19      tabContents.forEach((content) => {
20        content.classList.remove("active");
21      });
22      document.getElementById(mouseoverItem.dataset.id).classList.add("active");
23//ホバーされたメニュー項目の data-id の値を取得
24
25    });
26
27    mouseoverItem.addEventListener("mouseout",() => {
28      mouseoverItem.classList.remove("active");
29      document.getElementById(mouseoverItem.dataset.id).classList.remove("active");
30    });
31  });
32}
33
34

行動規範の内容に同意します

回答2件

ベストアンサー

CSSを修正（追記）するのみで、いけそうですよ。
※ご提示のCSSに追記いたしました。

~~「aのactiveでないものをホバーしたとき」は
必要なさそうな..
~~

CSS
1body {
2  font-size: 14px;
3}
4
5.menuContainer {
6  margin: 30px auto;
7  width: 500px;
8}
9
10.menu {
11  list-style: none;
12  padding: 0;
13  margin: 0;
14  display: flex;
15}
16
17.menu li a {
18  display: inline-block;
19  width: 100px;
20  text-align: center;
21  padding: 8px 0;
22  color: #333;
23  text-decoration: none;
24  border-radius: 4px 4px 0 0;
25  transition: 0.4s;
26}
27
28.menu li a.active {
29  background: #333;
30  color: #fff;
31}
32.menu li a:not(.active):hover {
33  /* aのactiveでないものをホバーしたとき */
34  opacity: 0.5;
35  transition: opacity 0.4s;
36}
37.tabContent.active {
38  background: #333;
39  color: #fff;
40  min-height: 150px;
41  padding: 12px;
42  display:block;
43  animation-duration: 0.4s; /* ←追記 */
44  animation-name: fade-in;  /* ←追記 */
45}
46
47.tabContent {
48  display:none;
49}
50
51 /* ↓ 追記 ↓ */
52@keyframes fade-in {
53  0% {
54    display: none;
55    opacity: 0;
56  }
57
58  1% {
59    display: block;
60    opacity: 0;
61  }
62
63  100% {
64    display: block;
65    opacity: 1;
66  }
67}
68

投稿2020/07/17 07:11

編集2020/07/17 07:15

Yousuck

総合スコア349

退会済みユーザー

2020/07/17 10:29

回答ありがとうございます！解決できた上に知らないプロパティや＠-規則を知れて勉強になりました！

行動規範の内容に同意します

こんな感じでしょうか？

js
1  tabContents.forEach( tabContent => {
2    tabContent.addEventListener('mouseover', e => e.target.classList.add("active") )
3    tabContent.addEventListener('mouseout', e => e.target.classList.remove("active") )
4  });

訂正

こういう感じですか？

css
1  .tabContent {
2    display: block;
3    visibility: hidden;
4    transition:  0.4s;
5    max-height: 0;
6  }
7  .tabContent.active {
8    visibility: visible;
9  }