タブパネル-jQuery

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


スポンサーリンク


以下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>

デモサイト

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です