質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

368閲覧

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

yukimaenaga

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2024/07/21 01:56

編集2024/07/22 05:12

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

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

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

該当のソースコード

特になし

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

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

補足

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2024/07/22 00:51

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

2024/07/22 02:37

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

2024/07/22 05:14

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

回答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
yambejp

総合スコア116201

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukimaenaga

2024/07/25 10:11

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

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

Lhankor_Mhy

総合スコア36782

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問