CSSとjQueryを使って、左側の項目を5秒ごとに切り替え、それに連動して右側の項目をふわっと表示させたい。

### 実現したいこと
写真に書いてある通り、左側の項目が５秒ごとに変更され、それと連動して右側の項目もふわっと表示させたいです。

発生している問題・分からないこと

実装するためのコードが分からないです。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

Googleで切り替え、連動の仕方を調べてもわかりませんでした。

補足

該当部分でつかっているHTMLやCSSのコードが必要であれば、追加で書きます。

Lhankor_Mhy

2024/07/22 00:51

左側の項目の変更とは何を指すのか、右側の項目との連動とはどういうものなのか、具体的にご提示ください。それとも、項目は何でもいいということでしょうか。

yambejp

2024/07/22 02:37

左側はメニューですよね？表示を１つにするとメニューとして成り立ちませんのでアクティブにするという意図でしょうか？逆にアクティブにしたら勝手にアクティブが移っていくのは気持ち悪いですが・・

yukimaenaga

2024/07/22 05:14

コメントありがとうございます。自分の語彙力だと説明ができないので、写真を追加しました。見ていただけないでしょうか？

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

回答2件

たとえばこんな感じで

html
1<style>
2.menu:not(.active),
3.content:not(.active){
4display:none;
5}
6.content{
7animation:fadein .5s;
8}
9@keyframes fadein{
10  from{opacity:0;}
11 to{opacity:1;}
12}
13</style>
14<script>
15window.addEventListener('DOMContentLoaded', function(e){
16  let count=1;
17  const max=document.querySelectorAll('.menu').length;
18  setInterval(()=>{
19    count++;
20    if (max<count) count=1;
21    document.querySelectorAll('.active').forEach(x=>x.classList.remove('active'));
22    document.querySelectorAll(`.menu:nth-child(${count} of .menu),.content:nth-child(${count} of .content)`).forEach(x=>x.classList.add('active'));
23  },2000);
24});
25</script>
26<ol>
27<li value="1" class="menu active">aaa</li>
28<li value="2" class="menu">bbb</li>
29<li value="3" class="menu">ccc</li>
30</ol>
31<div class="content active">
32<h2>aaa</h2>
33<p>contents aaa</p>
34</div>
35<div class="content">
36<h2>bbb</h2>
37<p>contents bbb</p>
38</div>
39<div class="content">
40<h2>ccc</h2>
41<p>contents ccc</p>
42</div>

※ふわっとさせるの忘れてたので調整

投稿2024/07/22 05:53

編集2024/07/22 10:29

yambejp

総合スコア116201

yukimaenaga

2024/07/25 10:11

見るの遅くなってしまいすみません、回答ありがとうございます。

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

ベストアンサー

いかがでしょうか。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .wrapper {
10            display: flex;
11            justify-content: space-between;
12        }
13
14        li {
15            display: none;
16            opacity: 0;
17        }
18
19        li.active {
20            display: block;
21            opacity: 1;
22        }
23
24        .right-side li {
25            transition: all .5s .5s;
26        }
27
28        .left-side:has(:nth-child(1).active)+.right-side :nth-child(1),
29        .left-side:has(:nth-child(2).active)+.right-side :nth-child(2),
30        .left-side:has(:nth-child(3).active)+.right-side :nth-child(3) {
31            display: block;
32            opacity: 1;
33
34            @starting-style {
35                opacity: 0;
36            }
37        }
38    </style>
39</head>
40
41<body>
42    <div class="wrapper item_1">
43        <ul class="left-side">
44            <li>1.~~~</li>
45            <li>2.~~~</li>
46            <li>3.~~~</li>
47        </ul>
48        <ul class="right-side">
49            <li>
50                <img src="http://placehold.jp/150x150.png?text=1" alt="">
51                1.~~~
52            </li>
53            <li>
54                <img src="http://placehold.jp/150x150.png?text=2" alt="">
55                2.~~~
56            </li>
57            <li>
58                <img src="http://placehold.jp/150x150.png?text=3" alt="">
59                3.~~~
60            </li>
61        </ul>
62    </div>
63    <script type="module">
64        const sleep = time => new Promise(resolve => setTimeout(resolve, time));
65
66        Array.fromAsync(
67            (function* () {
68                while (true) {
69                    yield* document.querySelectorAll('.left-side li')
70                }
71            })(),
72            async el => {
73                el.classList.add('active')
74                await sleep(3000);
75                el.classList.remove('active')
76            }
77        )
78    </script>
79</body>
80
81</html>