表示切り替え２ JavaScript

テーブルタグの表示切り替え２

　前のページのスクリプトをアレンジしたものです。
　別のリンクをクリックすると開いていたテーブルを閉じて表示します。
　Netscape Communicator 4.7 で動く？のは下のスクリプト。
　　http://kmyh.my.coocan.jp/gaku/hyouzi2kai.html

全てを閉じてのスクリプト

  <script type="text/javascript">
  <!--
  function showhide(id){
    if(document.getElementById){
      if(document.getElementById(id).style.display == "block"){
        document.getElementById(id).style.display = "none";
      }else{
        document.getElementById("id1").style.display = "none";
        document.getElementById("id2").style.display = "none";
        document.getElementById("id3").style.display = "none";
        document.getElementById(id).style.display = "block";
      }
    }
  }
  //-->
  </script>

他テーブルを非表示

　Netscape 6 以上と Internet Explorer 5 以上で動く？
　Netscape 7.1 と Internet Explorer 5.16で確認しました。

テーブルの表示非表示が切り替わります。

このテーブルは初期状態では非表示に設定されています。

スクリプトの「else」以降にリンクを開く前に
全てを閉じる命令を追加しました。

他のテーブルを非表示にして表示します。

他は閉じましたか？

同じ所をクリックすれば全て非表示です。

対応ブラウザ以外では、「document.layers[id].visibility」と
「document.all(id).style.visibility」を使えばできるらしいが
レイアウトとかを切替えの度に変更しないとだめみたい。

  <div>
  <a href="javascript:showhide('id1')">テーブルの表示非表示が...省略...
  </div>
  <div class="NN" id="id1">
  <table border="1" cellspacing="0" cellpadding="10">
  ...省略...
  </table>
  </div>
  <div>
  <a href="javascript:showhide('id2')">他のテーブルを非表示...省略...
  </div>
  <div class="NN" id="id2">
  <table border="1" cellspacing="0" cellpadding="10">
    ...省略...
  </table>
  </div>
  <div>
  <a href="javascript:showhide('id3')">同じ所をクリックすれば...省略...
  </div>
  <div class="NN" id="id3">
  <table border border="1" cellspacing="0" cellpadding="10">
    ...省略...
  </table>
  </div>

　div のidは、重複しないようにします。

　対応ブラウザ以外で閉じていても良いなら、divタグのclass指定を
　class="NN"を省略し、<div id="id1" style="display:none;">のようにします。

動作ブラウザ判定スクリプト

　動作ブラウザ判定スクリプトは前ページへ。
　
　箱根のページのメニューはこれらのスクリプトを使ってます。
　　http://kmyh.my.coocan.jp/bekkan/hakone/hakone.html