jQueryでタブメニューを実装（画像メニュー版）

jQuery2010年8月12日

こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。
私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。

• jQueryはこちらからダウンロード
• 実際のサンプル

HTML

<div id="tab-box">
<ul id="nav" class="clearFix">
<li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a></li>
<li><a href="#tab-02"><img src="img/nav-02.gif" alt="" width="80" height="30"/></a></li>
<li><a href="#tab-03"><img src="img/nav-03.gif" alt="" width="80" height="30"/></a></li>
<li><a href="#tab-04"><img src="img/nav-04.gif" alt="" width="80" height="30"/></a></li>
</ul>
<div id="tab-01">
<p>メニュー1のコンテンツメニュー1のコンテンツメニュー1のコンテンツ</p>
</div>
<div id="tab-02">
<p>メニュー2のコンテンツメニュー2のコンテンツメニュー2のコンテンツ</p>
</div>
<div id="tab-03">
<p>メニュー3のコンテンツメニュー3のコンテンツメニュー3のコンテンツ</p>
</div>
<div id="tab-04">
<p>メニュー4のコンテンツメニュー4のコンテンツメニュー4のコンテンツ</p>
</div>
</div>

CSS

*{margin:0;padding:0;}
body{padding:10px;}
#tab-box ul {
width:500px;
margin:0 10px;
padding: 0;
list-style: none;
}
#tab-box ul li {
margin-right:3px;
float:left;
display:inline;
font-size:0;
}
#tab-box ul li a img{
outline:none;
border:none;
}
#tab-box div {
display:none;
width:500px;
margin-bottom:30px;
padding:20px;
border:3px solid #0066cc;
}
.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}

Javascript

$(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() {
// クリックしたタブ画像をオンの状態に
var imgSrc = $(this).children('img').attr('src').replace(/data/o/g, "");
var imgDot = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
$(this).children('img').attr('src',onSrc);
// タブ画像の切り替え
var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/data/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 {
// 何度もクリックした場合もタブ画像をオンの状態に
var imgSrc = $(this).children('img').attr('src').replace(/data/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;
}
})
// ロールオーバー
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(/data/o/g, "");
$(this).children('img').attr('src',imgOff);
}
});
});

このスクリプトにはロールオーバーのスクリプトも含まれていますが、別のスクリプトで実装していればロールオーバー部分の関数は削除して大丈夫です。上記のスクリプトでは、ロールオーバーおよびメニューがアクティブになった場合に「_o」を画像ファイル名に付与するようになっています。ロールオーバーとアクティブの画像を別々にしたければ、スクリプト部分の「_o」と書かれている部分を書き換えれば簡単にカスタマイズできます。

• jQueryでタブメニューを実装（テキストメニュー版）
• ナビゲーションのカテゴリを自動でアクティブにする（テキスト版）

この記事を読んでいる方にオススメの記事

• jQueryjQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する
• jQueryニュースティッカーをjQueryで実装する／jquery.slider編
• jQueryjQueryでオリジナルツールチップを使用する
• jQueryテーブルの偶数列に背景を自動で敷くスクリプト
• jQueryナビゲーションのカテゴリを自動でアクティブにする（テキスト版）
• jQueryjQueryで画像のロールオーバーを実装

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。