jQueryを使ってタブを作ってみます。
このサンプルは自分で使うことを想定してるので作りが少々自分設定になってるますが、サンプル事態はきちんと動きました。
完成品イメージ↓
tab001に完成品をアップしておいたので動きはこっちで見てください。
ファイル構成
-
index.htmlHTMLのタグのみで、JavaScriptやCSSは外部ファイルで読み込みです。
-
selector.jsタブをクリックしたときの動きを扱う用のJavaScriptです。
-
selector.css今回のタブ用のCSSです。
コード
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Contents-Script-Type" content="text/javascript" />
<title>タブ-test</title>
<link href="css/selector.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/selector.js"></script>
</head>
<body>
<div id="tab-box">
<ul id="nav" class="clearFix">
<li><a href="#tab1"><img src="img/pict1.png" width="96" height="127" /></a></li>
<li><a href="#tab2"><img src="img/pict2.png" width="95" height="127" /></a></li>
<li><a href="#tab3"><img src="img/pict3.png" width="96" height="127" /></a></li>
<li><a href="#tab4"><img src="img/pict4.png" width="96" height="127" /></a></li>
</ul>
<!--タブ内容-->
<div id="tab1">タブ1</div>
<div id="tab2">タブ2</div>
<div id="tab3">タブ3</div>
<div id="tab4">タブ4</div>
</div><!-- / #tab-box -->
</body>
</html>
selector.js
// JavaScript Document
$(function(){
var handler = $('ul#nav li a');
var url = document.URL;
var urlId = url.substr(url.lastIndexOf('#'));
var urlIdJudgment = urlId.lastIndexOf('#');
$('ul#nav').each(function(){
$('#tab-box > div:first').show();
var imgSrc = $('ul#nav li:first img').attr('src');
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
$('ul#nav li:first img').attr('src',onSrc).addClass('tab-on');
});
// クリック時の動作
handler.click(function() {
// クリックしたタブ画像をオンの状態に(replaceなのでファイル名に_oをつけたす)
var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
$(this).children('img').attr('src',onSrc);
// タブ画像の切り替え(演算子で_oをファイル名に付け足す)
var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_o/g, "");
$('ul#nav li img.tab-on').attr('src',imgOff);
$('ul#nav li img').removeClass('tab-on');
$(this).children('img').addClass('tab-on');
// コンテンツの切り替え
var clickAttr = $(this).attr('href');
var showAttr = '#' + $('#tab-box > div:visible').attr('id');
if(clickAttr !== showAttr) {
$('#tab-box > div:visible').hide();
var showDiv = '#tab-box div' + clickAttr;
$(showDiv).show();
return false;
}
else {
// 何度もクリックした場合もタブ画像をオンの状態に(演算子で_oをファイル名に付け足す)
var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
$(this).children('img').attr('src',onSrc);
return false;
}
})
// ロールオーバー(演算子で_oをファイル名に付け足す)
handler.hover(function() {
var classJudgment = $(this).children('img').attr('class');
if(classJudgment != 'tab-on') {
var imgSrc = $(this).children('img').attr('src');
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
$(this).children('img').attr('src',onSrc);
}
}, function() {
var classJudgment = $(this).children('img').attr('class');
if(classJudgment != 'tab-on') {
var imgOff = $(this).children('img').attr('src').replace(/_o/g, "");
$(this).children('img').attr('src',imgOff);
}
});
});
selector.css
@charset "UTF-8";
/* CSS Document */
#tab-box ul {
width: 766px;
margin: 0px;
padding: 0;
list-style: none;
margin: 0px;
}
#tab-box ul li {
margin-right:0px;
float:left;
display:inline;
font-size:0;
margin-right: 2px;
}
#tab-box ul li a img{
outline:none;
border:none;
}
#tab-box div {
display:none;
width:390px;
height: 100px;
background:#CCCCCC;
}
.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}