メニュー項目からmouseoutしてもそこがタブ内なら消えないタブメニューにしたい

ドットインストールのJavaScriptでタブメニューを作ろうを終了したのですが、クリックしてタブを開く処理でしたのでこれをホバーして開くものにしたいと思い、addEventListenerをclickからmouseoverとmouseoutに変更しました。

しかし、メニュー項目からmouseoutすると消える処理ですので表示されたタブ中のリンクを押せません。

どなたか教えていただけると有り難いです。

##試したこと
メニュー項目とタブに共通のクラスを持たせて、mouseoverとmouseoutの処理を分け、mouseoutの処理の方に共通のクラスを組み込んだ。

mouseover
1menuItems.forEach((mouseoverItem) => {
2    mouseoverItem.addEventListener("mouseover", (e) => {
3      e.preventDefault();
4      menuItems.forEach((item) => {
5        item.classList.remove("active");
6      });
7      mouseoverItem.classList.add("active");
8      tabContents.forEach((content) => {
9        content.classList.remove("active");
10      });
11      document.getElementById(mouseoverItem.dataset.id).classList.add("active");
12    });
13  });
14

mouseout
1  document.getElementById("tabMenu")
2.forEach((mouseoutItem) => {
3    mouseoutItem.addEventListener("mouseout", () => {
4      mouseoutItem.classList.remove("active");
5      document.getElementById(mouseoutItem.dataset.id).classList.remove("active");
6    });
7  });
8

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

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

回答3件

hover処理を希望というのでmouseover/outを提案されたのだと思いますが
mouseoutで消さなければいいだけでは？

投稿2020/06/10 07:17

yambejp

総合スコア116724

yambejp

2020/06/10 07:34

yambejp

2020/06/10 07:34

<div class="menuContainer"> <ul class="menu"> <li><a href="#" data-id="about" class="active">サイトの概要</a></li> <li><a href="#" data-id="service">サービス内容</a></li> <li><a href="#" data-id="contact">お問い合わせ</a></li> </ul> <section class="tabContent active" id="about"> サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。 </section> <section class="tabContent" id="service"> サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。 </section> <section class="tabContent" id="contact"> お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。 </section> </div>

退会済みユーザー

2020/06/22 07:31

コメントありがとうございます。表示されっぱなしにならないようにもしたいのですが、どう考えれば良いのでしょうか。hover処理と、activeクラスを操作したい範囲が異なるのでうまくいきません。

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

ベストアンサー

HTML構成を変えて、タブのタイトルとコンテントを同じ要素内<li>に収めました。
そのliをホバーすることによって、activeを変えてます。
また、CSSでtab-contentの表示場所や重なりを調節しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
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
11  <body>
12    <div class="menuContainer">
13      <ul class="menu">
14        <li class="tab">
15          <h2 class="tab-title">サイトの概要</h2>
16          <section class="tabContent" id="about">
17            サイトの概要。 サイトの概要。 サイトの概要。 サイトの概要。
18            サイトの概要。 サイトの概要。
19          </section>
20        </li>
21        <li class="tab">
22          <h2 class="tab-title">サービス内容</h2>
23          <section class="tabContent" id="service">
24            サービス内容。 サービス内容。 サービス内容。 サービス内容。
25            サービス内容。 サービス内容。
26          </section>
27        </li>
28        <li class="tab">
29          <h2 class="tab-title">お問い合わせ</h2>
30          <section class="tabContent" id="contact">
31            お問い合わせ。 お問い合わせ。 お問い合わせ。 お問い合わせ。
32            お問い合わせ。 お問い合わせ。
33          </section>
34        </li>
35      </ul>
36    </div>
37    <script src="js/main.js"></script>
38  </body>
39
40</html>
41

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

JavaScript
1"use strict";
2
3{
4  const menuItems = document.querySelectorAll(".menu .tab");
5  //メニュー項目
6
7  const tabContents = document.querySelectorAll(".tabContent");
8  //メニューのタブに表示される内容
9
10
11  menuItems.forEach((mouseoverItem) => {
12
13    const currentTab = mouseoverItem.querySelector(".tabContent");
14
15    mouseoverItem.addEventListener("mouseover", (e) => {
16      e.preventDefault();
17
18
19      menuItems.forEach((item) => {
20        item.classList.remove("active");
21      });
22      mouseoverItem.classList.add("active");
23    });
24
25    mouseoverItem.addEventListener("mouseout", () => {
26      mouseoverItem.classList.remove("active");
27    });
28  });
29}

投稿2020/06/25 03:15

退会済みユーザー

総合スコア0

退会済みユーザー

2020/06/25 16:08

ありがとうございます！！とても分かり易かったです。勉強になりました！

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

mouseoutを振る範囲ではないでしょうか。
要はイベントを発生させる要素のコントロールですね。
.menu li aではなく、.menuContainerにするとか。

投稿2020/06/10 06:56

編集2020/06/10 06:57

m.ts10806

総合スコア80875

退会済みユーザー

2020/06/22 07:13

コメントありがとうございます。それだとうまくactiveクラスがつかなくなってしまい、タブが表示できないんです。 .menuContainer と .menu li a を両方定義して、イベントを発生させる要素には.menuContainer の方を、activeクラスに関する部分には .menu li a の方を書いてみましたがこれもできませんでした。

m.ts10806

2020/06/22 10:02 編集

>まだ回答を求めていますであれば、現在の状態が分かる、試したことを「質問本文に」追記してください。時間もたっていて回答もついているのに何も追記なく回答を依頼されてもできるアドバイスはありません。

退会済みユーザー

2020/06/22 11:42

追記しました。説明不足で申し訳ありません！

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

あなたの回答