- ベストアンサー
jQueryのタブメニューでフェードイン・アウト効果を実現する方法
- jQueryを使ったタブメニューで内容の切り替えをする際に、フェードイン・アウトの効果を付ける方法をまとめました。
- 上記のコードではタブの切り替えができますが、フェード効果を付けるためには追記が必要です。
- 具体的な追記方法については検索しても解決できなかったため、情報提供をお願いします。
- mayomayo123
- お礼率90% (10/11)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
読み込む場所はhead・bodyのどちらでもOKですよ。 <!-- ～ -->は、HTMLタグ内ではコメントアウトとして使用されますが、 条件付きコメントというものもあります。 http://ja.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88 Javascriptが動作しない場合は、まずブラウザのデベロッパーツールで確認してみて下さい。 エラー発生時にはエラー情報がコンソールに表示されるのでそれでデバッグできます。
その他の回答 (1)
- fzdbx76mdi
- ベストアンサー率28% (4/14)
フェードさせてるだけなので、参考程度にどうぞ。 ちなみに、ソースを張るなら<HTML>～</HTML>まで全部張った方がテストしてもらいやすいと思いますよ。 -------- <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> #tab_a, #tab_b, #tab_c{ width: 200px; height: 200px; margin-top:20px; padding:9px; border:3px solid #555; } #tab_a{ display: block; background-color: #99cc00 } #tab_b{ display: none; background-color: #9900cc } #tab_c{ display: none; background-color: #0099cc } </style> </head> <body> <div id="wrapper"> <ul id="tabMenu"> <li class="tab_a"><img src="tab1.png"/ ></li> <li class="tab_b"><img src="tab2_2.png" /></li> <li class="tab_c"><img src="tab3_2.png" /></li> </ul> <div id="tab"> <div id="tab_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> <div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.tab_a').on('click', function(){ if ($("#tab_a").is(":hidden") && $("#tab_b, #tab_c").is(":visible")) { $("#tab_b, #tab_c").hide(); $("#tab_a").fadeIn(250, function () {}); } }); $('.tab_b').on('click', function(){ if ($("#tab_b").is(":hidden") && $("#tab_a, #tab_c").is(":visible")) { $("#tab_a, #tab_c").hide(); $("#tab_b").fadeIn(250, function () {}); } }); $('.tab_c').on('click', function(){ if ($("#tab_c").is(":hidden") && $("#tab_a, #tab_b").is(":visible")) { $("#tab_a, #tab_b").hide(); $("#tab_c").fadeIn(250, function () {}); } }); }); </script> </body> </html>
お礼
返信ありがとうございます。 ソースが長くなりすぎるので要所だけを貼ったつもりが、逆に面倒な場合があるのですね 今後注意したいと思います。ご指摘ありがとうございます。 教えて頂いたソースを張り付けた所、思っていた通りの動作をしてくれました。 そこで何点か質問があるのですが… ・<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 元々jqueryはhead内にて読み込ませているのですが、既存のと置き換えしてみた所、フェードの動作がしなくなりました。 これはbody内で読み込みをしなければならないのでしょうか？ ・jqueryのコードをタブ切替に使っていた上記jsのファイル（tab.js）に追記した所、動作しなくなりました。 追記の仕方はこうです。 <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ <!-- 中略 --> jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); $('.tab_a').on('click', function(){ if ($("#tab_a").is(":hidden") && $("#tab_b, #tab_c").is(":visible")) { <!-- 以下に続く --> ・<!-- の使い方 今まで<!-- ～ -->はコメントアウトのような物だと思ってましたが、使い方を見ると違うようです どのような意味を持つのでしょうか？ 以上です。こんな事も分からないのか！と言わず生暖かく教えて頂けると 物凄く助かります。よろしくお願いします。
お礼
大変勉強になりました。 ありがとうございます！