JavaScriptによる表示切り替え(ブログペット複数表示向け)

JavaScriptを使った、タブによる表示の切り替えをやってみました。

月並みではあるんですが、JavaScriptを使い、ブログペットなどのブログパーツを切り替えて表示させるというのをやっておりまして。

これまでに、いくつかやり方が紹介されているのですが、自分用にともっとすっきりとした形のものがあったらいいな、と思っていろいろ調べたりなんやりしておりました。

で今回は、藤本壱さんが書かれました書籍、『JavaScript中級講座 - Ajaxを学ぶ前の基礎知識』（技術評論社）の内容からのスクリプトを利用させていただきました。

JavaScriptによってClassを書き換えるという方法で表示させる部分の切り替えをおこなう、というものです。ソースコードなどは書籍のほうに詳しく解説されていますので、ここでは省略します。

それで、一応できあがったのがこのページです。↓

切り替えサンプル

サンプルなので、ペットのコードのかわりにスクリーンショットにしてあります。また一部クラス名などをペット切り替え用として、こちらで書き換えさせていただきました。

ペット切り替えに特化することもないとは思いますので、応用すれば他の用途にも使えそうです。