タブパネル-jQuery

いまさらながらタブパネルです。いや、使う機会があったので載せておくだけですよ。

---

スポンサーリンク

---

以下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;
  })
})

本文です。

 
サンプルタブ
 
テストタブ
 
タブパネル
 
 
 
 

テキストテキストテキスト
 
 
テキストテキストテキスト


テキストテキストテキスト

デモサイト