いまさらながらタブパネルです。いや、使う機会があったので載せておくだけですよ。
スポンサーリンク
以下CSS設定
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のリンク下後に載せるコード
$(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;
})
})
本文です。
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト