Q&A
PHP+Smarty3（JavaScriptを含んだHTMLテンプレート）の環境で、以下、ブラウザで表示させた際のソースです。（最終的に吐き出されてるHTML）
HTML
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>*********</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 8 <meta name="robots" content="noindex,nofollow"> 9 <meta http-equiv="Pragma" content="no-cache"> 10 <meta http-equiv="Cache-Control" content="no-store"> 11 <meta http-equiv="Expires" content="0"> 12 <link rel="stylesheet" type="text/css" href="templates/products.css"> 13 <script> 14 15function show_data_table(k){ 16 if (k == '1') { 17 document.getElementById('data_1').style.display='block'; 18 }else{ 19 document.getElementById('data_1').style.display='none'; 20 } 21 if (k == '2') { 22 document.getElementById('data_2').style.display='block'; 23 }else{ 24 document.getElementById('data_2').style.display='none'; 25 } 26 if (k == '3') { 27 document.getElementById('data_3').style.display='block'; 28 }else{ 29 document.getElementById('data_3').style.display='none'; 30 } 31 32} 33 34</script> 35 </head> 36 <body> 37 38 <h2>*********</h2> 39 <button id="back" onClick="location.href='index.php'"> <<= 戻る</button> 40 <h3>製品リスト</h3> 41 42 <!---ライン切換え部---> 43 <div id="line_panel"> 44 <button class="line_btn" type="button" onClick="show_data_table(1)">A001</button> 45 <button class="line_btn" type="button" onClick="show_data_table(2)">A002</button> 46 <button class="line_btn" type="button" onClick="show_data_table(3)">A003</button> 47 48 </div> 49 50<!---データ表示部---> 51 <div id="data_1"> 52 <div>A001の製品データ<div> 53 <table class="product_list"> 54 <tr> 55 <th>id</th> 56 <th>品目コード</th> 57 <th>機種名</th> 58 <th>1ショット生産数</th> 59 <th>登録日</th> 60 </tr> 61 <tr> 62 <td>1</td> 63 <td>A002</td> 64 <td>456</td> 65 <td>1</td> 66 <td>2022年01月08日</td> 67 </tr> 68 </table> 69 </div> 70 <div id="data_2"> 71 <div>A002の製品データ<div> 72 <table class="product_list"> 73 <tr> 74 <th>id</th> 75 <th>品目コード</th> 76 <th>機種名</th> 77 <th>1ショット生産数</th> 78 <th>登録日</th> 79 </tr> 80 <tr> 81 <td>2</td> 82 <td>A007</td> 83 <td>654</td> 84 <td>1</td> 85 <td>2022年01月07日</td> 86 </tr> 87 </table> 88 </div> 89 <div id="data_3"> 90 <div>A003の製品データ<div> 91 <table class="product_list"> 92 <tr> 93 <th>id</th> 94 <th>品目コード</th> 95 <th>機種名</th> 96 <th>1ショット生産数</th> 97 <th>登録日</th> 98 </tr> 99 <tr> 100 <td></td> 101 <td></td> 102 <td></td> 103 <td></td> 104 <td></td> 105 </tr> 106 </table> 107 </div> 108 109 110 111 112 113 </body> 114</html> 115
当初アクセス時はdata_1（A001）～data_3（A003）が全部表示されていて、A001のline_btnをクリックするとA001のデータを残して他が消えます（正常動作）
しかし、A002、A003のボタンをクリックすると<!---データ表示部--->の全部が非表示になってしまいます。
どうしてこうなるのかがわかりません。。。（フロントエンド苦手・・・・）
回答1件
0
ベストアンサー
こんにちわ。
div タグが正しく閉じられていない所が3箇所あって、
そこを治すとうまく動いている感じです。
以下にコードを示します。
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>*********</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 8 <meta name="robots" content="noindex,nofollow"> 9 <meta http-equiv="Pragma" content="no-cache"> 10 <meta http-equiv="Cache-Control" content="no-store"> 11 <meta http-equiv="Expires" content="0"> 12 <link rel="stylesheet" type="text/css" href="templates/products.css"> 13 <script> 14 15function show_data_table(k){ 16 if (k == '1') { 17 document.getElementById('data_1').style.display='block'; 18 }else{ 19 document.getElementById('data_1').style.display='none'; 20 } 21 if (k == '2') { 22 document.getElementById('data_2').style.display='block'; 23 }else{ 24 document.getElementById('data_2').style.display='none'; 25 } 26 if (k == '3') { 27 document.getElementById('data_3').style.display='block'; 28 }else{ 29 document.getElementById('data_3').style.display='none'; 30 } 31 32} 33 34</script> 35 </head> 36 <body> 37 38 <h2>*********</h2> 39 <button id="back" onClick="location.href='index.php'"> <<= 戻る</button> 40 <h3>製品リスト</h3> 41 42 <!---ライン切換え部---> 43 <div id="line_panel"> 44 <button class="line_btn" type="button" onClick="show_data_table(1)">A001</button> 45 <button class="line_btn" type="button" onClick="show_data_table(2)">A002</button> 46 <button class="line_btn" type="button" onClick="show_data_table(3)">A003</button> 47 48 </div> 49 50<!---データ表示部---> 51 <div id="data_1"> 52 <div>A001の製品データ</div> <!-- 閉じタグになっていなかった --> 53 <table class="product_list"> 54 <tr> 55 <th>id</th> 56 <th>品目コード</th> 57 <th>機種名</th> 58 <th>1ショット生産数</th> 59 <th>登録日</th> 60 </tr> 61 <tr> 62 <td>1</td> 63 <td>A002</td> 64 <td>456</td> 65 <td>1</td> 66 <td>2022年01月08日</td> 67 </tr> 68 </table> 69 </div> 70 <div id="data_2"> 71 <div>A002の製品データ</div> <!-- 閉じタグになっていなかった --> 72 <table class="product_list"> 73 <tr> 74 <th>id</th> 75 <th>品目コード</th> 76 <th>機種名</th> 77 <th>1ショット生産数</th> 78 <th>登録日</th> 79 </tr> 80 <tr> 81 <td>2</td> 82 <td>A007</td> 83 <td>654</td> 84 <td>1</td> 85 <td>2022年01月07日</td> 86 </tr> 87 </table> 88 </div> 89 <div id="data_3"> 90 <div>A003の製品データ</div> <!-- 閉じタグになっていなかった --> 91 <table class="product_list"> 92 <tr> 93 <th>id</th> 94 <th>品目コード</th> 95 <th>機種名</th> 96 <th>1ショット生産数</th> 97 <th>登録日</th> 98 </tr> 99 <tr> 100 <td></td> 101 <td></td> 102 <td></td> 103 <td></td> 104 <td></td> 105 </tr> 106 </table> 107 </div> 108 </body> 109</html>
参考になれば幸いです。
投稿2022/01/08 06:51
総合スコア480
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/08 07:13
2022/01/08 07:15
2022/01/08 09:47