jQueryのタブメニューでフェードイン・アウト効果を実現する方法

前へ 次へ
このQ&Aのポイント
  • jQueryを使ったタブメニューで内容の切り替えをする際に、フェードイン・アウトの効果を付ける方法をまとめました。
  • 上記のコードではタブの切り替えができますが、フェード効果を付けるためには追記が必要です。
  • 具体的な追記方法については検索しても解決できなかったため、情報提供をお願いします。
回答を見る
  • ベストアンサー

jQueryのフェードイン・アウト効果について

いつもお世話になります。 jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。 以下がソースです。 <!-- html --> <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_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> </div> <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ jQuery("#tab_a").css("display", "block"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_bボタンをクリックした時の処理 jQuery(".tab_b").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "block"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_cボタンをクリックした時の処理 jQuery(".tab_c").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "block"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); }); 上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。 やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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が動作しない場合は、まずブラウザのデベロッパーツールで確認してみて下さい。 エラー発生時にはエラー情報がコンソールに表示されるのでそれでデバッグできます。

mayomayo123
質問者

お礼

大変勉強になりました。 ありがとうございます！

その他の回答 (1)

回答No.1

フェードさせてるだけなので、参考程度にどうぞ。 ちなみに、ソースを張るなら<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>

mayomayo123
質問者

お礼

返信ありがとうございます。 ソースが長くなりすぎるので要所だけを貼ったつもりが、逆に面倒な場合があるのですね 今後注意したいと思います。ご指摘ありがとうございます。 教えて頂いたソースを張り付けた所、思っていた通りの動作をしてくれました。 そこで何点か質問があるのですが… ・<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")) { <!-- 以下に続く --> ・<!-- の使い方 今まで<!-- ～ -->はコメントアウトのような物だと思ってましたが、使い方を見ると違うようです どのような意味を持つのでしょうか？ 以上です。こんな事も分からないのか！と言わず生暖かく教えて頂けると 物凄く助かります。よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery 背景のフェード

    下記のliの背景色をフェードイン・アウトする方法は ありますでしょうか？ $("li").hover(function(){ $(this).css("background-color","#000000"); },function(){ $(this).css("background-color",""); }); <ul> <li><a href="#"><img src="xxx.png" /></a><li> <li><a href="#"><img src="xxx.png" /></a><li> </ul> 宜しくお願いします。

  • ｊQueryでの画像のフェードインのループ

    ｊQuery初心者です。 jQueryで３枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 下記だと何故２週目の２枚目で止まるのか？の原因と、スマートな書き方をご教授頂けませんか？ <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>

  • JQueryを使ってcssを書き換え

    何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });

  • jQueryの導入方法について

    jQueryの導入が上手くいかず、全く動かなくて困っております。 サイト（http://labs.opentone.co.jp/?p=4923）から説明があったURLから実装に必要なjQueryをダウンロードしました。 ・jquery.flexslider.js ・flexslider.css そして下記コードを入力しました。 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> さきほど取得した画像をスライドショーを表示させたい場所に下記の通り指定します。 画像名を「sampleX.png」としています。 <div class="flexslider"> <ul class="slides"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> <li><img src="images/sample4.png"></li> <li><img src="images/sample5.png"></li> </ul> </div> 最後にflexfliderの関数を呼び出してスライドショーを実行させます。 $("document").ready(function(){ $('.flexslider').flexslider(); }); 以上のことを行ってjQueryらしい動作どころか画像すら表示されませんでした。（画像パスは入力し直しています） 他にダウンロードするものやコードを書かなければならないことなど、動作に必要なものについて教えて頂けませんでしょうか。 ※上記以外のことは一切行っておりません 何卒よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 画像がフェードインしてからフェードアウトする

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。

    • ベストアンサー
    • HTML
  • 画像をフェードアウト＆フェードインで切り替えたい

    jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ 　$("#cat-list a").click(function(){ 　　$("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); 　　$("p#cat-name").text($(this).text()); 　　return false; 　}); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> 　<li><a href="images/cat01.jpg">ネコ1</a></li> 　<li><a href="images/cat02.jpg">ネコ2</a></li> 　<li><a href="images/cat03.jpg">ネコ3</a></li> 　<li><a href="images/cat04.jpg">ネコ4</a></li> 　<li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。

  • jqueryで要素を別要素に表示したいが重なる

    jqueryには詳しくないのですが、必要に迫られて下記のようなページを制作しています。 構造 1）menu画像をクリックすれば　gazouboxでその画像が大きく表示され、（A,B) 2）別のmenu画像をクリックすれば　contentの画像が変わり、（a1,a2,a3 → b1,b2,b3) 3)contentの画像をクリックすれば　itemshowのDiv内に画像名と同じｓｒｃ．htmlが表示され、 4）それとともに　そのcartの内容がcartpanelに表示されます。 実際のページではcartの内容は　ショッピングカートのscriptタグを記載します。 ネットで調べて悪戦苦闘しながら上記の構造で動作するところまで漕ぎつけたのですが、 このHTMLでは　「・・のカートタグ」という文字が順に表示されますが　 私の製作中のページでは積み重なります。 cartpanelにショッピングカートが表示されて、同一場所に重なって表示されていくので、 クリックした分だけ商品価格の部分が重なって行って 価格が読み取れなくなります。 恐らく、非表示にしているcartを画像クリックでcartpanelに表示するとき、 画像のclassに設定したsrcを　cartの処理に同じように使えていないのが問題だろうとは思うのですが、 何日もネット検索しながらいろいろ調べては試してみたものの　基礎知識がないため解決できませんでした。 ページの必要最低限を書き出してみました。 contents画像（．switchButton）をクリックしたら、 そのクリックした画像用の　cart　だけが　cartpanel　に表示され 別の画像をクリックしたら　次の画像用のカートに切り替わってくれるようにするには プログラムをどのように修正すればよいでしょうか？ お手数かけますがご指導よろしくお願いいたします。 ---------------------------------------------------------------- <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <title>無題ドキュメント</title> <style type="text/css"> .full_content { position: relative; float: left;} .switchButton {list-style-type: none;} .menu{ width: 120px; height: 120px; list-style: none; text-align: center; display: block !important; cursor: pointer; border: 1px solid #F66; margin-top: 3px;} .menu:first-child {margin-left:0;} .hover { font-weight: bold; display: block !important;} .content { width: 100px; height: 200px; position: absolute; top: 250px;} .cartpanel { height: 200px; width: 150px;} .menu img { height: 120px; width: 120px;} #gazoubox { height: 200px; width: 200px; float: left; border: 1px solid #6F6; margin-bottom: 100px;} </style> <script type="text/javascript"> $(function () { $('#big').attr('src', $('.menu img:first').attr('src')); $('.menu img').click(function () { $('#big').attr('src', $(this).attr('src')); }); }); $ (function(){ $ (".content:not('.hover + .content')").hide(); $ (".menu").click(function(){ $(".menu").removeClass("hover"); $(this).addClass("hover"); $(".content:not('.hover + .content')").fadeOut(); $(".hover + .content").fadeIn(); }); }); $(document).ready(function(){ $('.itemshow').load('A.html'); $(".cart").css("visibility", "hidden"); $('.switchButton').click(function(){ var loadContents = $(this).attr('src'); $('.itemshow').load(loadContents+'.html'); ($(this).find(".cart").css("visibility", "visible")).appendTo('.cartpanel'); }); }); </script> <div id="gazoubox"><img id="big" /></div> <div class="itemshow"></div> <div class="cartpanel"></div> <div class="full_content"> <div class="menu hover"><img src="img/A.jpg" /></div> <div class="content"> <ul id="ilist"> 　<li class="switchButton" src="a1"><img src="img/a1.jpg" /> <div class="cart" src="a1">a1のカートタグ</div> </li> <li class="switchButton" src="a2"><img src="img/a2.jpg" /> <div class="cart" src="gk-pch-kuro">a2のカートタグ</div> </li> <li class="switchButton" src="a3"><img src="img/a3.jpg" /> <div class="cart" src="gk-pch-kuro">a3のカートタグ</div> </li> </ul></div> <div class="menu"><img src="img/B.jpg" /></div> <div class="content"> <ul id="ilist"> 　<li class="switchButton" src="b1"><img src="img/b1.jpg" /> <div class="cart" src="a1">b1のカートタグ</div> </li> <li class="switchButton" src="b2"><img src="img/b2.jpg" /> <div class="cart" src="b2">b2のカートタグ</div> </li> <li class="switchButton" src="b3"><img src="img/b3.jpg" /> <div class="cart" src="b3">b3のカートタグ</div> </li> </ul></div> </div> </body>

  • リンクをマウスオーバーでフェードイン・アウトがしたです。

    リンクをマウスオーバーでフェードイン・アウトがしたです。 以下のようなソースを書いたのですが、ページを開いた１回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか？ <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ ごご教授、よろしくお願いいたします。

  • jQueryのアコーディオンがIE6でちゃんと動いてくれない

    jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。

  • jQuery タブとスライダーの併用

    jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する