javascript - 如何将 jQuery 功能选项卡脚本从不显示更改为页面外的绝对定位？

Question

我是 jQuery 的新手，我正在使用下面的脚本。基本上它使用两个无序列表来创建选项卡功能(一个用于选项卡，一个用于内容)。现在，当您单击选项卡时，输出从“display:list-item;”切换。到“显示:无；”。我正在尝试将其更改为“position:absolute；左:-10000px；”和“position:relative；左:0；”这样所有的内容都会被呈现，但只是移出页面而不是被隐藏。

我遇到了您在页面底部看到的问题 http://jqueryui.com/demos/tabs/除了它不受 CSS 控制。它以某种我不熟悉的方式在下面的脚本中受到控制。任何帮助将不胜感激。

//INITIALIZATION

$.featureList(
        $(".tabs li a"),
        $(".output > li"), {
            start_item  :   0
        }
    );

//SCRIPT
         (function($) {
            $.fn.featureList = function(options) {
                var tabs    = $(this);
                var output  = $(options.output);

                new jQuery.featureList(tabs, output, options);

                return this;    
            };

            $.featureList = function(tabs, output, options) {
                function slide(nr) {
                    if (typeof nr == "undefined") {
                        nr = visible_item + 1;
                        nr = nr >= total_items ? 0 : nr;
                    }

                    tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

                    output.stop(true, true).filter(":visible").fadeOut();
                    output.filter(":eq(" + nr + ")").fadeIn(function() {
                        visible_item = nr;  
                    });
                }

                var options         = options || {}; 
                var total_items     = tabs.length;
                var visible_item    = options.start_item || 0;

                options.pause_on_hover      = options.pause_on_hover        || true;
                options.transition_interval = options.transition_interval   || 0;

                output.hide().eq( visible_item ).show();
                tabs.eq( visible_item ).addClass('current');

                tabs.click(function() {
                    if ($(this).hasClass('current')) {
                        return false;   
                    }

                    slide( tabs.index( this) );
                });

                if (options.transition_interval > 0) {
                    var timer = setInterval(function () {
                        slide();
                    }, options.transition_interval);

                    if (options.pause_on_hover) {
                        tabs.mouseenter(function() {
                            clearInterval( timer );

                        }).mouseleave(function() {
                            clearInterval( timer );
                            timer = setInterval(function () {
                                slide();
                            }, options.transition_interval);
                        });
                    }
                }
            };
        })(jQuery);

Answer 1

该脚本中的 Action 是通过 .FadeIn 和 .Fadeout 发生的，它们为不透明度设置动画。 Fadeout 在不透明度动画结束时应用 display:none。相应地，FadeIn 仅适用于设置为 display:none 的元素。 Fadein 对可见性不起作用:隐藏或不透明度:0。查看 jquery 文档，它大部分都非常好。

因此，您想用 css 位置更改替换这两行代码。有很多不同的方法可以做到这一点，这主要取决于您是否希望元素在页面之外动画化，只是跳到那里。

另外仅供引用 共享此类内容以进行故障排除的最简单方法是制作一个 jsfiddle，其中包含减少的代码子集，仅包含相关内容，然后每个人都可以研究它直到它起作用。 :)