実現したいこと
上から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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。