「タブパネル」はタブ(見出し)をクリックすると、パネル(タブの内容が書かれた部分)が切り替わるUIです。アコーディオンパネル(関連記事)と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。 基本のタブパネルの作り方 タブパネルのHTML/XHTML(以下、HTML)は、タブ部分(見出し)とパネル部分(表示する中身)をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。 パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき(1タブ項目=1つのli要素)、それぞれに「tab1」「tab2」……といった連番のid名を
![jQueryでタブパネルを作るチュートリアル (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c5cc038747f851a6643024dc05c0165ccaeecdd/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F07%2F22%2F240489%2Fl%2F947ffd95838c8645.jpg)