切り替え JavaScript

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

　http://egis-s.hp.infoseek.co.jp/garakuta/showhide.html
　上記ページのスクリプトなら Netscape 6 以上で切替えできるのですが、
対応しないブラウザでは非表示のままなんでスクリプトをちょっと変えてみました。
箱根旅行のメニューのスクリプトは、次ページ↓になります。
　http://kmyh.my.coocan.jp/gaku/hyouzi2.html
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(id).style.display = "block";
      }
    }
  }
  //-->
  </script>

非表示で始まる場合

　非表示で始めるには、表示切替えにする部分を<div >(赤字)で囲んで
　idや非表示のタグを書きます。以下のリンク先を開いて見て下さい。
　Netscape 6 以上と Internet Explorer 5 以上で動く？
　Netscape 7.1 と Internet Explorer 5.16で確認しました。

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

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

divタグのdisplay属性をclass指定でnoneにしています。
ブラウザ判定スクリプトにて対応ブラウザのみ非表示にしてみました。

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

  <div>
  <a href="javascript:showhide('id1')">テーブルの表示非表示が...省略...
  </div>
  <div class="NN" id="id1">
  <table border="1" cellspacing="0" cellpadding="10">
    ...省略...
  </table>
  </div>

　divに囲まれた部分は、テーブルタグ(table)でなくても大丈夫です。
　divに囲まれた所だけ表示・非表示になる仕組みです。

  <div class="NN" id="id1">
  <p>
    ...省略...
  </p>
  </div>

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

　Netscape 6と7 用に、appNameが N で始まり appVersionが 5 以上を指定。
Explorer 5 以上用に「else」で、appNameが M で始まり appVersionが 4 以上を指定。
ただし IE 4 を除外する為、userAgentの中に MSIE 4 がないという条件に設定してみた。
各ブラウザのappVersionの例を載せたページ。
以下（script）は <head>～</head>内に書くこと。

  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  
  <script type="text/javascript">
  <!--
  if(navigator.appName.charAt(0)=='N' && navigator.appVersion.charAt(0)>=5){
   document.write('<style type="text/css"><!--');
   document.write('.NN{ display:none; }');
   document.write('--><\/style>');
  }else{
   if(navigator.appName.charAt(0)=='M' && navigator.appVersion.charAt(0)>=4){
    if(navigator.userAgent.indexOf('MSIE 4') >=0){
    }else{
     document.write('<style type="text/css"><!--');
     document.write('.NN{ display:none; }');
     document.write('--><\/style>');
    }
   }
  }
  //-->
  </script>
  
  </head>

　以下だけでも良いかも？

  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  
  <script type="text/javascript">
  <!--
  if(document.getElementById){
   document.write('<style type="text/css"><!--');
   document.write('.NN{ display:none; }');
   document.write('--><\/style>');
  }
  //-->
  </script>
  
  </head>

　上記スクリプトをアレンジした次ページです。
　http://kmyh.my.coocan.jp/gaku/hyouzi2.html