CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。
「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。
全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。
そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに行ってるようで、欝陶しさ爆発。
IE6 (Windows)、Netscape 6.2 (Windows, Linux) で動作確認しました。 古いブラウザだとだめっぽいです。
それから、Mozilla 1.4 (Windows) だと、 選択されているタブの見出しの下の線が消えません。 border の上書きがうまくいかないようです。 切り替え動作はうまくいきます。
CSSとHTMLを修整したことにより上記の問題は解決しました！ ただし見出しとの間に1 dotの隙間が...。(050215)
トップ > たつをのホームページ > 小さなツールたち > CSS と JavaScript でタブ切り替え