<JavaScript>表示・非表示切り替え、改良版

                                    • -

2019/08/12
新しくスクリプトを作成しました。
poolbooyer.hatenablog.jp

                                  • -

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つ以上での切り替え用のコードにさらにブラッシュアップしていきたいなぁって感じです。