質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

2882閲覧

jQueryのタブ切り替え後に表示されるスライドショーを初期状態からアクティブにしたい

AsamiKakuishi

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2014/11/12 07:39

jQueryのタブ切り替え後に表示されるスライドショーを初期状態からアクティブにしたいのですが、タブ切り替え後に上手く1枚目のスライドショーをアクティブにした状態に出来ません。分かる方にご教示頂けますと幸いです。

#tabsがタブメニューのボタン
#thumbBtnがスライドショーの画像でクリックすると画像が切り替わります

【Script】

<!-- Tab Script--> <script type="text/javascript"> $(function() { $('#tabs a[href^="#panel"]').click(function(){ $("#tabs .panel").hide(); $(this.hash).fadeIn(); $('#thumbBtn li a[href$="'+$endPath+'/"]').parent().addClass(’active’); return false; }); $('#tabs a[href^="#panel"]:eq(0)').trigger('click'); }) </script> <!-- SlideShow Script--> <script type="text/javascript"> $(function (){ var active="active",interval=5000; var index=0, timerId=null; var thumbs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); thumbs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); thumbs.eq(0).addClass(active); content.eq(0).fadeIn(2000); cap.eq(0).fadeIn(1000); thumbs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change2(thumbs.index(this)); setTimer(); return false; }); setTimer(); function setTimer(){ timerId=setTimeout(timeProcess,interval); return false; } function timeProcess(){ change((index+1)%thumbs.length); timerId=setTimeout(arguments.callee,interval); } function change2(t_index){ thumbs.eq(index).removeClass(active); thumbs.eq(t_index).addClass(active); setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(0), cap.eq(index).stop(true, true).hide() ;}, 0); setTimeout(function(){ index=t_index; content.eq(index).fadeIn(0), cap.eq(index).fadeIn(0) ;}, 0) } }); </script> <!-- SlideShow Script--> <script type="text/javascript"> $(function (){ var active="active",interval=5000; var index=0, timerId=null; var thumbs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); thumbs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); thumbs.eq(0).addClass(active); content.eq(0).fadeIn(2000); cap.eq(0).fadeIn(1000); thumbs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change2(thumbs.index(this)); setTimer(); return false; }); setTimer(); function setTimer(){ timerId=setTimeout(timeProcess,interval); return false; } function timeProcess(){ change((index+1)%thumbs.length); timerId=setTimeout(arguments.callee,interval); } function change2(t_index){ thumbs.eq(index).removeClass(active); thumbs.eq(t_index).addClass(active); setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(0), cap.eq(index).stop(true, true).hide() ;}, 0); setTimeout(function(){ index=t_index; content.eq(index).fadeIn(0), cap.eq(index).fadeIn(0) ;}, 0) } }); </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

 まず、同じスクリプトが2つ書いてあります(diff見ましたが一致しました)ので、これは片方を削除してください。バグの原因になります。
次に SlideShow Script が DOMready イベントに設定されていますので、これを適当な名前の関数にして、Tab Script から呼び出せるスコープに置いてください。
最後に、Tab Script の中で、タブを表示する処理の一つとして先ほどの関数を呼び出してください。this.hash の値をチェックする形がいいでしょう。

これでおそらくできるはずですが、うまくいかないようでしたらコメントをください。

投稿2014/11/16 10:02

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AsamiKakuishi

2014/11/18 10:14

回答ありがとうございます! おっしゃられている手順で試してみたいと思います。 もしどうしても上手くいかない場合は再度コメントさせて頂くかもしれませんが、何卒よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問