0

タブがクリックされたときにフェードイン効果を含める方法を教えてもらえますか? FadeIN で遊んでみましたが、うまくいきません。どんな助けでも大歓迎です！

ありがとうございます！

enter code here

<script>
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function(){
            $('ul.tabs').each(function(){


enter code here

        // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links,     use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                $active.addClass('active').fadeIn(200);
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function(e){
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });
4

1 に答える 1

0

$content が有効なオブジェクトを参照している限り、必要に応じてフェードを追加してください。

            // Bind the click event handler
            $(this).on('click', 'a', function(e){

                // Prevent the anchor's default click action
                e.preventDefault();

                // Make the old tab inactive.
                $active.removeClass('active');
                $content.fadeOut(500);
                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.addClass('active');
                $content.fadeIn(500);

            });

おそらく最初に実行するのに最適な onClick アクションであるため、preventDefault を一番上に移動しました。

于 2013-10-11T23:13:55.143 に答える