改良してjQueryライブラリと共存させよう
前ページまでの作業で一通りパネルの実装は済みましたが、このままだとタブをクリックしたときに、どのタブが表示されているかが分かりません。そこで、クリックしたタブをハイライトするように改良しましょう。この機能はPrototype.jsライブラリでも実現できますが、ここでは「jQuery」ライブラリを使ってみたいと思います。現在では、Prototype.jsよりjQueryの方が多く使われているため、できればjQueryライブラリで実現しておいたほうが後々使いやすいでしょう。
ただ、Prototype.jsとjQueryには、$() という同じ名前の関数があるため、同時に使わないようにする必要があります。jQueryには、「jQuery.noConflict()」と書くだけで、Prototype.jsなど他のライブラリと共存させる方法が用意されています。
単純に「jQuery.noConflict()」とした場合、jQueryで $() と書いている部分を、jQuery() と書き直せば従来どおり動作するようになります。また、「$j = jQuery.noConflict()」のように指定すると、$() のかわりに $j() が使えるようになります。つまり、$() を任意の名前に変更できます。
この処理は、jQueryが読み込まれた直後に行ないます。その後、Prototype.jsなどを読み込ませれば、2つのライブラリを併用できるようになります。
■HTML部分（※読み込み順に注意）
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/book.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/glider.js"></script>
●スクリプトファイル（book.js）
var $j = jQuery.noConflict(); // $()の衝突回避
衝突回避ができたら、次にタブをハイライトする処理を追加しましょう。クリックされたら、タブが含まれる領域（<a>タグ）のスタイルシートクラス名を追加／削除するようにします。「tabHighlight」クラスを追加するとタブがハイライトされ、削除すると元に戻る仕組みです。ここでは、クリックされたタブ以外のtabHighlightクラスを削除してから、クリックしたタブにtabHighlightクラスを追加しています。
$j(".controls a").click(function(){
$j(".controls a").removeClass("tabHighlight");
$j(this).addClass("tabHighlight");
});
これで今回の課題は完成です。以下に、作成した作例サイトを公開しています。ぜひ実際の動作を確認してみてください。
完成した作例。タブの部分をクリックするとコンテンツがスライド。その際、アクティブなタブがハイライトされます
次回は、このページをさらに改良していきます。どうぞお楽しみに。
（作例デザイン：wataru）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
