jQueryの画像を使用したタブメニューについて

解決済

質問者：gspopo
質問日時：2011/07/12 14:33
回答数：2件

jQueryの画像を使用したタブメニューを実装しようと思い、
http://www.ezgate-mt.sakura.ne.jp/jquery/71.html
上記のサイトを参考に行なってみたのですが、各コンテンツの中にdivタグを使用するとその内容が全く表示されないという状況に陥ってしまっており、とても悩んでいます。
一体どうすればdivタグも使用出来るようになるでしょうか。

どなたかお教え頂ければ幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： fujillin
回答日時：2011/07/12 17:06

＞divタグを使用するとその内容が全く表示されないという状況に

＞陥ってしまっており、とても悩んでいます。
ご提示のサイトのスクリプトは、タブ内のdiv要素を想定して作られていないとしか言いようがないです。

具体的には、
　$('#tab-box > div:visible') （=tab-box内の全てのdiv）に対してidが一致しなければ非表示とするような処理の考え方になっているので、表示対象のタブの中にあるdivも非表示となってしまいます。
おまけに、CSSで最初から
　#tab-box div { display:none; }
と設定されているので、全部のdivが初期状態として非表示に設定されてしまいます。

＞一体どうすればdivタグも使用出来るようになるでしょうか。
少々面倒ですが、イベント時の処理として、『tabのリストを順に見てクリックされたタブ以外のリストが示しているidを持つ要素だけを非表示にする』といった考え方にしてあげればよろしいかと。

タブ切替え部分のみであれば、こんな感じでどうでしょうか。
（cssの非表示設定をはずしておくこと。全角空白は半角に）

$(function(){
　var handler = $('ul#nav li a');
　handler.click(function(){
　　var target = this;
　　handler.each(function(){
　　　var id = $(this).attr("href").match(/(#[^#]+)$/);
　　　if(id) $(id[1]).css("display", target==this?"block":"none");
　　});
　　return false;
　});
　$(handler.get(0)).click();
});

- 0
- 件

通報する

この回答へのお礼

大変丁寧なご回答をありがとうございます！
スクリプト自体がそのような作りではなかったのですね。納得した上で教えて頂いた記述を反映させようとしたのですが、すみません、入れる場所が間違っているのか何なのか上手く表示されず……宜しければ教えて頂けると嬉しいです。

【入れてみたもの】
$(function(){
　var handler = $('ul#nav li a');
　handler.click(function(){
　　var target = this;
　　handler.each(function(){
　　　var id = $(this).attr("href").match(/(#[^#]+)$/);
　　　if(id) $(id[1]).css("display", target==this?"block":"none");
　　});
　　return false;
　});
　$(handler.get(0)).click();
});
// クリック時の動作
handler.click(function() {
// クリックしたタブ画像をオンの状態に
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);
// タブ画像の切り替え
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 = '#' + $('#mycook_blog_tab-box > div:visible').attr('id');
if(clickAttr !== showAttr) {
$('#mycook_blog_tab-box > div:visible').hide();
var showDiv = '#mycook_blog_tab-box div' + clickAttr;
$(showDiv).show();
return false;
}
else {
// 何度もクリックした場合もタブ画像をオンの状態に
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;
}
})
// ロールオーバー
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);
}
});

通報する

お礼日時：2011/07/13 09:32

No.2

回答者： fujillin
回答日時：2011/07/13 12:10

#1です。

#1の回答はタブの切替えの処理のみです。
ロールオーバーなどは追加してください。
以下テストしたソースです。
（CSSは省略。divのdisplay:noneはコメントアウトしておいてください）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

</script>
</head>
<body>

<div id="tab-box">
<ul id="nav" class="clearFix">
<li><a href="#tab-01"><img src="btn1.gif" alt="tab1" width="80" height="30"></a></li>
<li><a href="#tab-02"><img src="btn2.gif" alt="tab2" width="80" height="30"></a></li>
<li><a href="#tab-03"><img src="btn3.gif" alt="tab3" width="80" height="30"></a></li>
<li><a href="#tab-04"><img src="btn4.gif" alt="tab4" width="80" height="30"></a></li>
</ul>

<div id="tab-01">
<div>test1</div>
<p>メニュー1のコンテンツメニュー1のコンテンツメニュー1のコンテンツ</p>
<div>test1</div>
</div>
<div id="tab-02">
<div>test2</div>
<p>メニュー2のコンテンツメニュー2のコンテンツメニュー2のコンテンツ</p>
<div>test2</div>
</div>
<div id="tab-03">
<div>test3</div>
<p>メニュー3のコンテンツメニュー3のコンテンツメニュー3のコンテンツ</p>
<div>test3</div>
</div>
<div id="tab-04">
<div>test4</div>
<p>メニュー4のコンテンツメニュー4のコンテンツメニュー4のコンテンツ</p>
<div>test4</div>
</div>
</div>

</body>
</html>