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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

1498閲覧

jQueryのtabpanelでfadein,fadeoutを指定したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2016/11/03 06:51

以下のタブパネルのjqueryにfadein、fadeoutを指定したいのですが、
タブパネルの機能が全部表示されてしまいます。

記述方法をご教授頂けますと幸いです。

js

$(".tabs a").on('click', function(e) { e.preventDefault(); var target = $(this).attr('href'); if (! $(target).length) return false; $('.tab', $(this).closest('.tabs')).removeClass('active'); $(this).closest('.tab').addClass('active'); $('.panel', $(target).closest('.panels')).removeClass('active'); $(target).addClass('active'); });

HTML

<!--(ひとつ目のタブ)--> <ul class="tabs"> <li id="tab1" class="tab active"><a href="#cont1">タブ01</a></li> <li id="tab2" class="tab"><a href="#cont2">タブ02</a></li> <li id="tab3" class="tab"><a href="#cont3">タブ03</a></li> </ul> <ul class="panels"> <li id="cont1" class="panel active"> タブ01の内容タブ01の内容タブ01の内容タブ01の内容タブ01の内容 </li><!---#cont1--> <li id="cont2" class="panel">タブ02の内容タブ02の内容タブ02の内容タブ02の内容タブ02の内容</li><!---#cont2--> <li id="cont3" class="panel">タブ03の内容タブ03の内容タブ03の内容タブ03の内容タブ03の内容</li><!---#cont3--> </ul> <!--(ひとつ目のタブ)--> <!--(2つ目のタブ)--> <ul class="tabs"> <li id="tab1" class="tab active"><a href="#cont2_01">タブ04</a></li> <li id="tab2" class="tab"><a href="#cont2_02">タブ05</a></li> <li id="tab3" class="tab"><a href="#cont2_03">タブ06</a></li> </ul> <ul class="panels"> <li id="cont2_01" class="panel active">もう一つのタブ01の内容もう一つのタブ01の内容もう一つのタブ01の内容</li><!---#cont2_01--> <li id="cont2_02" class="panel">もう一つのタブ02の内容もう一つのタブ02の内容もう一つのタブ02の内容</li><!---#cont2_02--> <li id="cont2_03" class="panel">もう一つのタブ03の内容もう一つのタブ03の内容もう一つのタブ03の内容</li><!---#cont2_03--> </ul><!--.panels--> <!--(2つ目のタブ)-->

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

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

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

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

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

yambejp

2016/11/04 05:14

idがかぶってますね
guest

回答2

0

fadeOutは必要なのでしょうか?
activeの仕様がいまいちわかりませんがこんな感じでどうでしょう?

HTML

1<script src="js/jquery.js"></script> 2<script> 3$(function(){ 4 $('.panel').not('.active').hide(); 5 $('.tabs a').on('click', function(e) { 6 e.preventDefault(); 7 var ul_index=$('.tabs').index($(this).parents('.tabs')); 8 var li_index=$('.tabs').eq(ul_index).find('.tab').index($(this).parents('.tab')); 9 $('.tabs').eq(ul_index).find('.tab').each(function(){ 10 var this_index=$('.tabs').eq(ul_index).find('.tab').index($(this)); 11 var flg=li_index==this_index; 12 $(this).toggleClass('active',flg); 13 var mypanel=$('.panels').eq(ul_index).find('.panel').eq(this_index); 14 mypanel.toggleClass('active',flg); 15 if(flg){ 16 mypanel.fadeIn(); 17 }else{ 18 mypanel.hide(); 19 } 20 }); 21 }); 22 23}); 24</script> 25 26<!--(ひとつ目のタブ)--> 27<ul class="tabs"> 28 <li class="tab active"><a href="#">タブ01</a></li> 29 <li class="tab"><a href="#">タブ02</a></li> 30 <li class="tab"><a href="#">タブ03</a></li> 31</ul> 32<ul class="panels"> 33 <li class="panel active">タブ01の内容タブ01の内容タブ01の内容タブ01の内容タブ01の内容</li> 34 <li class="panel">タブ02の内容タブ02の内容タブ02の内容タブ02の内容タブ02の内容</li> 35 <li class="panel">タブ03の内容タブ03の内容タブ03の内容タブ03の内容タブ03の内容</li> 36</ul> 37<!--(ひとつ目のタブ)--> 38 39<!--(2つ目のタブ)--> 40<ul class="tabs"> 41 <li class="tab active"><a href="#">タブ04</a></li> 42 <li class="tab"><a href="#">タブ05</a></li> 43 <li class="tab"><a href="#">タブ06</a></li> 44</ul> 45<ul class="panels"> 46 <li class="panel active">もう一つのタブ01の内容もう一つのタブ01の内容もう一つのタブ01の内容</li> 47 <li class="panel">もう一つのタブ02の内容もう一つのタブ02の内容もう一つのタブ02の内容</li> 48 <li class="panel">もう一つのタブ03の内容もう一つのタブ03の内容もう一つのタブ03の内容</li> 49</ul> 50<!--(2つ目のタブ)--> 51 52

投稿2016/11/04 05:16

編集2016/11/04 05:26
yambejp

総合スコア114574

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

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

0

ベストアンサー

CSS

1.panels .panel:not(.active) { 2 display: none; 3} 4```**動くサンプル:**[https://jsfiddle.net/3rxn8xq7/](https://jsfiddle.net/3rxn8xq7/)

投稿2016/11/03 08:08

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/11/03 08:20

ご回答いただありがとうございます! 現在のjsの記述で動くのですが、他タブをクリックした際に、fadeを付けたく fadeIn();を記述してもまったく反応しない状態になります。
kei344

2016/11/03 08:54

> fadeIn();を記述しても 質問文に書かれていないので、そもそも勘違いされているのかと思いました。質問文に「動かないコード」を現在のコードを消さずに「追記」ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問