Blog

ポータルサイト風タブパネル

2012.11.07Cat:プログラマー

 

DEMOはこちら!

 説明

 最初の2行目

はタブパネルの初期表示状態を設定しています。

$(“ul.tab li a.selected”).attr(“href”)は、class属性「selected」が設定されているa要素のhref属性を取得しています。

 

 タブがクリックされたときに発生するclickイベントを設定します。

a要素に対してイベントを設定する場合はreturn false; を必ず記述します。

 

 タブがクリックされたときは、すべてのタブ(ul.tab li a)からclass属性「selected」をいったん取り除き、

クリックされたタブにだけclass属性「selected」を付け直す処理を設定しています。

 

④ 最後にすべてのパネルをいったんhide()で非表示に設定。

$(this).attr(“href”)でクリックされたa要素のhref属性の値を読み出して、

値と同じ名前のid属性を持つパネルをshow()で表示します。

 

 

 

 

Author Profile

poe

本心でやれば、できないことはない!。。。。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ