[JS]アクティブなタブとパネルの境界線を無くすチュートリアル
Post on:2009年7月3日
アクティブなタブとパネルの境界線を無くすチュートリアルをSoh Tanakaから紹介します。
![デモのキャプチャ](/wp-content/uploads-2009/2009070308.png)
Simple Tabs w/ CSS & jQuery
demo
タブはリスト要素で実装されており、アクティブ時にはclassに「active」を与え、ボーダーの色を背景と同色(#fff)にして境界線を無くします。
![タブの実装イメージ](/wp-content/uploads-2009/2009070309.png)
デモではタブをクリックすると、フェードのアニメーションでパネルを切り替え、シンプルながらもかっこいいエフェクトを備えています。
スクリプトオフ時には各パネルは成り行きで表示され、各タブはページ内アンカーとして機能します。
sponsors