トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ プルダウンメニューを作成する

プルダウンメニューのような機能を作成します。
このページが開いたときは隠しておいて、ある文字をクリックするとメニューが表示されます。

また、その文字を再度クリックするとメニューが閉じられます。

この機能は、現在のメニューの状態を覚えておいて、自動的に反転するようにしています。
この機能を使いますと、文字を隠したり表示したりすることができます。

この下の「【MENU】」をクリックしてみてください。

※ここの「Javascriptサンプル」−「プルダウンメニューを3つ作成する」も参考にしてください。

◆ 実行サンプル

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「puldwn0.js」というファイル名で保存します。
txt_hide('div01'); function txt_hide(tagnam1){ document.getElementById('div01').style.display='none'; } function txt_flip(tagnam1){ if (document.getElementById(tagnam1).style.display == '') { document.getElementById(tagnam1).style.display='none'; } else { document.getElementById(tagnam1).style.display=''; } }


そしてメニューJavascriptの呼び出しを次のように記述します。 <span onclick="txt_flip('div01')" title="ここをクリックしてください。"> 【MENU】 </span><br> <span id="div01"> <a href="../faqhp.html">予備知識</a><br> <a href="../exphtml.html">HTMLの解説</a><br> <a href="../../htm/expcgi.html">CGI(Perl)の解説</a><br> </span> <script type="text/javascript" src="puldwn0.js"></script>



page update:2011/07/31 00:16

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom