JavaScriptを使った、タブによる表示の切り替えをやってみました。
月並みではあるんですが、JavaScriptを使い、ブログペットなどのブログパーツを切り替えて表示させるというのをやっておりまして。
これまでに、いくつかやり方が紹介されているのですが、自分用にともっとすっきりとした形のものがあったらいいな、と思っていろいろ調べたりなんやりしておりました。
で今回は、藤本壱さんが書かれました書籍、『JavaScript中級講座 - Ajaxを学ぶ前の基礎知識』（技術評論社）の内容からのスクリプトを利用させていただきました。
JavaScriptによってClassを書き換えるという方法で表示させる部分の切り替えをおこなう、というものです。ソースコードなどは書籍のほうに詳しく解説されていますので、ここでは省略します。
それで、一応できあがったのがこのページです。↓
サンプルなので、ペットのコードのかわりにスクリーンショットにしてあります。また一部クラス名などをペット切り替え用として、こちらで書き換えさせていただきました。
ペット切り替えに特化することもないとは思いますので、応用すれば他の用途にも使えそうです。