jQueryでタブパネルの作り方
jQueryを使ってタブパネルを作ってみます。メニュー部分はulにて、記事部分はulでもdivでも何でもOK。
画像を使わずタブパネル作成
画像を作るのは手間という人は、画像なしで作るのも手です。
リストタグ（ul）をfloatしてメニューを作り、その下に各メニューごとに分けた記事を書きます。
<div id="z1"> <ul id="z2" class="clearfix"> <li><a href="#z4" class="z7">メニュー１</a></li> <li><a href="#z5">メニュー２</a></li> <li><a href="#z6">メニュー３</a></li> </ul> <ul id="z3" class="clearfix"> <li id="z4">記事１（あいうえお）</li> <li id="z5">記事２（かきくけこ）</li> <li id="z6">記事３（さしすせそ）</li> </ul> </div>
タブパネルのポイントは、各記事にIDやクラス名を指定して、対応するa要素のhref属性に、IDやクラスのセレクタを入れることです。こうすることで、タブが押された時にhref属性の中身（＝記事のID）を取り出して、各記事の表示・非表示を操作することができます。
また、現在選択されているタブには、選択されていることを表すためにクラス（ここではz88）を指定しておきます。
ここまでで、htmlの操作は終わりです。
スタイルシートの方は、float処理の後は、borderの処理になりますね。
/* cssの記述 */
ul#z2,ul#z3 {
list-style-type:none;
}
ul#z2 li {
float:left;
display:inline;
line-height:24px;
text-align:center;
}
ul#z2 li a {
display:block;
position:relative;
width:100px;
background:#999;
border:solid 1px #000;
color:#fff;
font-weight:bold;
outline:none;
}
ul#z2 li a.z7 {
background:#fff;
border-bottom:none;
color:#000;
height:25px;
}
ul#z3 {
border:solid 1px #000;
border-top:none;
width:302px;
}
ul#z3 li {
padding:10px;
color:#333;
font-size:16px;
text-indent:1em;
}
//jsの記述
$(function(){
$("ul#z2 li a:not(:first)").css("border-left","none");
});
first-childセレクタへの対応ブラウザの関係で、jQueryにてボタン左のborderをnoneへ設定します。指定したborderの分だけ、widthやheightを調整します。
最後は、ボタンをクリックすると、ボタンの周りに点線が出るので、outline:none;としておきます。
ここまで終えたら、jQueryの編集です。
訳）今現在選択されている（クラスz7）タブメニューのhref属性を取得→初期は#z4、各記事（li）のうち、#z4以外のli要素（記事）を非表示にしておく。タブパネルがクリックされたら、タブパネルに付いている選択されていることを示すクラス（z7）を取り除いて、クリックされたli aに対してz7を追加する。その後、表示されていた記事含めて一旦全部の記事を非表示にした後、クリックされたli aに対応する記事を表示させる。
$(function(){
$("#z3 li:not("+$('.z7').attr('href')+")").hide();
$("#z2 li a").click(function(){
$("#z2 li a").removeClass("z7");
$(this).addClass("z7")
$("#z3 li").hide();
$($(this).attr("href")).show();
return false;
});
});
見づらいですが、「"#z3 li:not("」と「$('.z7').attr('href')」と「")"」が＋記号で足されたものが$関数の引数になります。
画像を使ったタブパネル作成
まずは、パネルに使う画像を用意（作成）します。
角丸長方形のアンカーポイントを削除して作ります。もちろん長方形でも丸でも三角でも四角でも何でもいいです。
幅と高さはきちんと揃えたほうがいいので、photoshopで最初から作るほうが楽かもしれません。といいつつillustratorで下記2つの図形を作成します。
画像なしのサンプルの文字（メニュー１等）のところを画像に、スタイルシートに下記記述修正すればOK。
/* cssの記述 */
ul#z2a li {
float:left;
text-align:center;
height:30px;
}
ul#z2a li a {
display:block;
position:relative;
width:auto;
background:url(../gif/185.gif) no-repeat;
}
ul#z2a li a.z7a img {
visibility:hidden;
}
ul#z3a {
border:solid 1px #ef7c1a;
border-top:none;
width:298px;
}
ul#z3a li {
padding:10px;
color:#333;
font-size:16px;
text-indent:1em;
}
<div id="z1a"> <ul id="z2a" class="clearfix"> <li><a href="#z4a" class="z7a"><img src="../gif/186.gif" alt="" /></a></li> <li><a href="#z5a"><img src="../gif/186.gif" alt="" /></a></li> <li><a href="#z6a"><img src="../gif/186.gif" alt="" /></a></li> </ul> <ul id="z3a" class="clearfix"> <li id="z4a">記事１（あいうえお）</li> <li id="z5a">記事２（かきくけこ）</li> <li id="z6a">記事３（さしすせそ）</li> </ul> </div>
- 記事１（あいうえお）
- 記事２（かきくけこ）
- 記事３（さしすせそ）
手抜きで２つしか画像を切り替えておりませんが、ロールオーバーのように複数の画像を使うこともできます。
パネル作成の補足
タブパネルの全てのタブ部分の長さと下のパネル部分の長さが同じであれば特に悩む必要はないのですが、タブが2つとかしかなくて、パネル部分の幅が長い場合、border-topを指定してしまうと選択されているタブの下にも線が入ってしまいます。
上手くボーダーを指定するには、タブの包括divに対して背景として下線の画像を指定する方法が使われます。また、パネル部分にborder-top:1pxしてからネガティブマージンで-1pxしてずらすという手もありますが、不具合があるかどうかは未検証。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
