jQuery を使用して非常に単純なフェードイン/フェードアウト タブ システムに取り組んでいますが、思ったほどスムーズではありません。
これが私のデモで、実際の動作を確認できます。
デモを見てみましょう。私はそれが互いにフェードインおよびフェードアウトすることを期待していましたが、タブ 1 > タブ 2 > タブ 3をクリックしてからタブ 1に戻ると、途中で奇妙なフェードイン/アウトの不具合が発生します。
これを修正する方法はありますか?私のjQueryは次のとおりです。
$(document).ready(function(){
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.fadeOut("slow");
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.fadeIn("slow");
e.preventDefault();
});
});
});
私のHTMLは次のとおりです。
<ul class="tabs">
<li><a href="#tab1">Overview</a></li>
<li><a href="#tab2">Sub Nav 2</a></li>
<li><a href="#tab3">Sub Nav 3</a></li>
</ul>
<div id="tab1">
<p>this is a test 1</p>
</div>
<div id="tab2">
<p>this is a test 2</p>
</div>
<div id="tab3">
<p>this is a test 3</p>
</div>
ポインタをありがとう:-)