### 実現したいこと
写真に書いてある通り、左側の項目が5秒ごとに変更され、それと連動して右側の項目もふわっと表示させたいです。
発生している問題・分からないこと
実装するためのコードが分からないです。
該当のソースコード
特になし
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
Googleで切り替え、連動の仕方を調べてもわかりませんでした。
補足
該当部分でつかっているHTMLやCSSのコードが必要であれば、追加で書きます。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
左側の項目の変更とは何を指すのか、右側の項目との連動とはどういうものなのか、具体的にご提示ください。
それとも、項目は何でもいいということでしょうか。
2024/07/22 02:37
左側はメニューですよね?表示を1つにするとメニューとして成り立ちませんのでアクティブにするという意図でしょうか?逆にアクティブにしたら勝手にアクティブが移っていくのは気持ち悪いですが・・
2024/07/22 05:14
コメントありがとうございます。自分の語彙力だと説明ができないので、写真を追加しました。見ていただけないでしょうか?
回答2件
0
たとえばこんな感じで
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総合スコア116201
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
いかがでしょうか。
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>
投稿2024/07/22 10:00
総合スコア36782
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。