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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

355閲覧

JSで表示しているものと非表示にしているものをリンクをクリックしたら切り替えたいです。

TMTN

総合スコア52

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2022/07/19 08:34

実現したいこと

上から3つのボックスを順に並べており、以下状態を表しています。

◆グレーアウト・・・完了
◆青枠・・・確認中
◆グレー枠・・・待機

「こちら」のリンクをクリックするとクリックした対象のボックスは完了済となりグレーアウトし、次確認事項の直下のボックス(テスト2)が指定させたいです。(指定は青枠)

イメージ説明

現状、青枠部を表示して、グレーアウトした状態のものをdisplay:noneで非表示としてます。
青枠部の「こちら」のリンクを押下されたら表示しているものと非表示のものを切り替えたいと考えています。

しかし、jsのソースに記載あるやり方だとテスト2の「こちら」をクリックして切り替えた後、次のテスト3が青枠にならない状態です。。

分かる方いらっしゃいましたらお力添えを頂きたいです。

以上、よろしくお願い致します。

該当のソースコード

html

1 <div id="test1" class="gray"> 2 <div> 3 <div class="main"> 4 <ul class="center"> 5 <h1 class="inner_ttl">テスト1</h1> 6 <button href="#" class="link_txt" value="a">こちら</button> 7 </ul> 8 </div> 9 <p class="txt">完了</p> 10 </div> 11 </div> 12 <div id="test2" class="blue"> 13 <div> 14 <div class="main"> 15 <ul class="center"> 16 <h1 class="inner_ttl">テスト2</h1> 17 <a href="#" class="link_txt" value="b" onclick="cl1()">こちら</a> 18 </ul> 19 </div> 20 <p class="txt">確認中</p> 21 </div> 22 </div> 23 <div class="blue" style="display: none; background-color: gray;"> 24 <div> 25 <div class="main"> 26 <ul class="center"> 27 <h1 class="inner_ttl">テスト2</h1> 28 </ul> 29 </div> 30 <p class="txt">待機</p> 31 </div> 32 </div> 33 <div id="test3" class="red"> 34 <div> 35 <div class="main"> 36 <ul class="center"> 37 <h1 class="inner_ttl">テスト3</h1> 38 <button href="#" class="link_txt" value="c">こちら</button> 39 </ul> 40 </div> 41 <p class="txt">待機</p> 42 </div> 43 </div> 44 <div id="red" class="red" style="display: none; background-color: gray;"> 45 <div> 46 <div class="main"> 47 <ul class="center"> 48 <h1 class="inner_ttl">テスト3</h1> 49 <a href="#" class="link_txt">こちら</a> 50 </ul> 51 </div> 52 <p class="txt">待機</p> 53 </div> 54 </div>

css

1.gray{ 2 border-radius: 5px; 3 background-color: gray; 4 padding: 20px 25px; 5 margin: 30px; 6} 7 8.blue{ 9 border-radius: 5px; 10 background-color: #fff; 11 padding: 20px 25px; 12 border: 2px solid blue; 13 margin:20px 0px; 14 margin: 30px; 15} 16 17.red{ 18 border-radius: 5px; 19 background-color: #fff; 20 padding: 20px 25px; 21 border: 2px solid #eee; 22 margin: 30px; 23} 24 25.txt{ 26 font-size: 16px; 27} 28 29.main{ 30 display: flex; 31} 32 33.center{ 34 width: 100%; 35 display: flex; 36 justify-content: space-between; 37 align-items: center; 38} 39 40.inner_ttl{ 41 font-size: 14px; 42} 43 44.link_txt{ 45 color: black; 46 cursor: pointer; 47}

js

1function cl1() { 2 let test2 = document.getElementById("test2"); 3 4 if (test2.style.display = "none") { 5 test2.style.display = "block"; 6 } elseif(test2.style.display = "block"); { 7 test2.style.display = "none"; 8 } 9}

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

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

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

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

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

guest

回答1

0

ベストアンサー

  • if文の条件式が、比較ではなく代入になっています。
  • JavaScriptの場合、else ifのように、elseifの間に半角スペースが必要です。
  • if文の)の後に、余計なセミコロン(;)がありますので、除去してください。

javascript

1if (test2.style.display == "none") { 2 // 中略 3} else if(test2.style.display == "block") { 4 // 中略 5}

これでも直らなければコメントください。

投稿2022/07/19 09:10

miyabi_takatsuk

総合スコア9528

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問