いつもご教授頂きありがとうございます。
今回はJqueryでの動作についてお聞きしたいのですが、
タブを実装するにあたり下記コードを導入しました。
$(function(){ $('#tab-menu li').on('click', function(){ if($(this).not('active')){ $(this).addClass('active').siblings('li').removeClass('active'); var index = $('#tab-menu li').index(this); $('#tab-box .tab').eq(index).addClass('active').siblings('.tab').removeClass('active'); } }); });
.tabにdisplay:noneが入っており、.activeにはdisplay:blockが入っています。
動作としてはちゃんと動くのですが
これにfadeIn動作を加えたいのですがどのように入れても希望したとおり動いてくれません。
これをどう改変すればfadeInでコンテンツが出現するのでしょうか?
何卒お力を借りれましたら助かります。
よろしくお願い致します。
追記です。
ご回答くださいましてありがとうございます。
説明足らずで申し訳ありません。
CSSは下記のようになっています。
#tab-menu { width: 425px; list-style: none; margin-left: auto; margin-right: auto; margin-bottom: 50px; } #tab-menu li { display: inline-block; color: #333; border-left: 1px #333 solid; cursor: pointer; padding-top: 1px; padding-left: 25px; padding-right: 25px; padding-bottom: 1px; } #tab-menu li.active { color: #333; cursor: pointer; text-decoration: underline; } #tab-menu li:last-child{ border-right: 1px #333 solid; } #tab-box .tab { display: none; } #tab-box .active { display: block; }
HTMLは下記です。
<ul id="tab-menu"> <li class="active">コンテンツ1</li> <li>コンテンツ2</li> </ul> <div id="tab-box"> <div class="tab active">中身1</div> <div class="tab">中身2</div> </div>
これで導入しますと普通にタブとして機能します。
これにfadeIn fadeOutのアニメーションを足したいです。
説明がわかりづらくて申し訳ありません。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/04 07:51