category
サイト構築 -JavaScript

[JS]アクティブなタブとパネルの境界線を無くすチュートリアル

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

アクティブなタブとパネルの境界線を無くすチュートリアルをSoh Tanakaから紹介します。

デモのキャプチャ

Simple Tabs w/ CSS & jQuery
demo

タブはリスト要素で実装されており、アクティブ時にはclassに「active」を与え、ボーダーの色を背景と同色(#fff)にして境界線を無くします。

タブの実装イメージ

デモではタブをクリックすると、フェードのアニメーションでパネルを切り替え、シンプルながらもかっこいいエフェクトを備えています。

スクリプトオフ時には各パネルは成り行きで表示され、各タブはページ内アンカーとして機能します。

Post on:2009年7月3日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS