<JavaScript>表示・非表示切り替え、改良版
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
2019/08/12
新しくスクリプトを作成しました。
poolbooyer.hatenablog.jp
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
今回はこれの続きというかソースコードを改良したものです。
前回と異なりidではなくclassを使った変更ができるようなコードに編集しました。
あとはボタンの情報を引数で渡すようにしてます
htmlのコード
<button name="hoge" class="hoe" onclick="display(0)">hhhh</button> <button name="koko" class="hoe" onclick="display(1)">kkkk</button> <div class="data" style="display: inline;"> <p>hogehoge</p> </div> <div class="data" style="display: none;"> <p>koukou</p> </div>
表示する情報のところのidがなくなってclassになってます
あとはonclickで呼び出すものに引数がついてます
JavaScriptのコード
var display = function(tab) { //切り替えるタブを確認する if (tab == 0) { //ボタンを押されなかった方を閉じるタブに指定 close= 1; } else { close = 0; } //切り替える対象を取得 var pane = document.getElementsByClassName("data"); //表示する pane[tab].setAttribute("style", "display:inline"); //非表示にする pane[close].setAttribute("style", "display:none"); }
今回はJavascriptのコードができるだけ短くなるようにということで制作しました。あとはidをやめたことで少し拡張性が上がりました。
これから2つ以上での切り替え用のコードにさらにブラッシュアップしていきたいなぁって感じです。