- ベストアンサー
jQueryの画像を使用したタブメニューについて
jQueryの画像を使用したタブメニューを実装しようと思い、 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html 上記のサイトを参考に行なってみたのですが、各コンテンツの中にdivタグを使用するとその内容が全く表示されないという状況に陥ってしまっており、とても悩んでいます。 一体どうすればdivタグも使用出来るようになるでしょうか。 どなたかお教え頂ければ幸いです。
- gspopo
- お礼率72% (24/33)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞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(); });
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
#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"> <!-- $(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(); }); //--> </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>
お礼
まだロールオーバー部分の設定が出来ていませんが、divは無事表示されました！ このたびは大変丁寧なご回答をありがとうございました。
お礼
大変丁寧なご回答をありがとうございます！ スクリプト自体がそのような作りではなかったのですね。納得した上で教えて頂いた記述を反映させようとしたのですが、すみません、入れる場所が間違っているのか何なのか上手く表示されず……宜しければ教えて頂けると嬉しいです。 【入れてみたもの】 $(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); } });