拙著「逆引きJavaScript」にもこのバリエーションがいくつか紹介されていますし、当サイトのトップページにも使われています。プルダウンメニューで選んだ項目に従ってJavaScriptでスタイルシートのdisplay属性を変えることによって、ページ内に表示されるものを切り替えます。Ajaxでも同じようなことができますが、ここでの例のようにデータが小さいものはHTML上にすべて置いて、CSSで表示/非表示を切り替えるようにする方がスクリプト的にも簡単で、しかも動作が速くなります。
ここではdivタグで囲まれた3つの部分にそれぞれ「item1」、「item2」、「item3」というIDをつけ、ページのhead部分ですべてのIDについてスタイルシートのdisplay属性の初期値を「none」(非表示)にします。プルダウンメニューで呼び出されたshowthis関数の引数でIDを指定したオブジェクトのdisplay属性を「block」(ブロック表示)に変えることにより、表示されます。表示/非表示にするものはこの例のようにdivタグで囲まれたものだけに限らず、他のタグ(pやform、imgなど)にもそのまま応用できます。タグによっては「block」(ブロック表示)ではなく「inline」(インライン表示)にしたほうがいい場合もあります。
(使用例)
私の書いたJavaScript入門書です。JavaScriptは非常に簡単なスクリプト言語です。私自身、勉強し始めて3週間目で「JavaScript小技集」を作り上げました。この本の最初の2、3章を読んだだけでもアイデアしだいで様々な自作スクリプトが作れるようになります。自分で勉強してみたくなった方はぜひ買ってください。
第3版では記述の古い部分を書き直し、新たにAjaxやW3C DOMに関する章や節を加えました。2006年6月発売。

