jQueryでタブパネルを作る - Web制作への階段

タブパネル

ソースファイル

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryタブパネル</title>
<link rel="stylesheet" href="css/style.css">
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="js/script.js"></script>
</head>

<body>
<div id="panel">
<h1>ショート・ケーキ</h1>
<ul class="tab">
<li class="current"><a href="#cake1">イチゴ・チーズ</a></li>
<li><a href="#cake2">イチゴ・ショート</a></li>
<li><a href="#cake3">ブルーベリー</a></li>
<li><a href="#cake4">イチゴ・ムース</a></li>
</ul>

CSS

@charset "utf-8";
/* CSS Document */
html,body,h1,p,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游ゴシック", YuGothic,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-weight: 500;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul {
list-style: none;/* マーカーを消す */
}
a {
text-decoration: none;/* 下線を消す */
}
img {
border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img {
vertical-align: bottom;
}

#panel {
width: 620px;
margin: 10px auto;
background: #FCC;
color: #FFF;
padding: 10px;
}
h1 {
color: #FFF;
}
ul.tab {
overflow: hidden;
}
ul.tab li {
float: left;
width: 25%;
}
ul.tab li a {
display: block;
background: #333;
box-sizing: border-box;
border-right: 4px solid #FCC;/*色はパネルの背景色と一緒*/
color: #FFF;
font-size: 12px;
padding: 20px;
text-align: center;
}
ul.tab li:last-child a{
border-right: none;
}
/*選択されているタブのスタイル*/
ul.tab li.current a {
background: #FCFCFC;
color: #000;
}
/*画像部分のスタイル*/
div.tabContents {
display: none;/*最初に全部消しておく*/
}
div.tabContents.current {
display: block;/*クリックして選択したものだけを見せる*/
}
.round {
background: #FCFCFC;/*li.current aの背景色と一緒*/
border-radius: 0 0 5px 5px;
text-align: center;
height: 400px;
padding: 10px;
}

Script

$(function(){
//タブ
$('.tab li a').on('click',function(){
// $(this).parent().addClass('current');
// $(this).parent().siblings('.current').removeClass;
$(this).parent().addClass('current').siblings('.current').removeClass('current');
//クリックしたaの親要素(li)にcurrentを付ける。
//他のli要素にcurrentが付いていた場合は削除する。

var tabTarget = $(this).attr('href');//クリックしたhrefの値を変数化する
$(tabTarget).addClass('current').siblings('.current').removeClass('current');
//クリックされたタブの中身の切り替え

return false;
});
});