いまさらながらタブパネルです。いや、使う機会があったので載せておくだけですよ。
スポンサーリンク
以下CSS設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | ul.tab{ padding:0; width: 760x; height:35px; overflow: hidden; } ul.tab li{ float: left; width: 100px; height: 35px; margin: 0px 0px 0px 5px; line-height: 35px; /* テキストの上下位置を中央ぞろえに */ text-align: center; padding: 0px; } ul.tab li a{ outline:none; background:url(../images/tab_b.gif) no-repeat; display:block; color:black; text-align:center; } ul.tab li a.selected{ background: url(../images/tab_b.gif) no-repeat 0px -35px; text-decoration:none; color:#333; cursor:default; } ul.panel{ margin-top:-1px; border:1px solid #999999; padding:0; margin-bottom: 15px; } ul.panel li{ list-style-type:none; padding:10px; text-indent:1em; color:#333; } |
以下はjqueryのリンク下後に載せるコード
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $("ul.tab li:first a").addClass("selected"); $("ul.panel li:not(:first)").hide(); $("ul.tab a").click(function(){ if(!$(this).hasClass("selected")){ $("ul.tab a.selected").removeClass("selected"); $(this).addClass("selected"); $("ul.panel li").hide().filter($(this).attr("href")).show(); } return false; }) }) |
本文です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="tab"> <li><a href="#tab1">サンプルタブ</a></li> <li><a href="#tab2">テストタブ</a></li> <li><a href="#tab3">タブパネル</a></li> </ul> <ul class="panel"> <li id="tab1"> テキストテキストテキスト </li> <li id="tab2"> テキストテキストテキスト </li> <li id="tab3"> テキストテキストテキスト </li> </ul> |