以下のタブパネルの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つ目のタブ)-->
回答2件
あなたの回答
tips
プレビュー