Как изменить скрипт вкладок функций jQuery с нулевого отображения на абсолютное позиционирование вне страницы?

Question

Я довольно новичок в jQuery и использую приведенный ниже скрипт.В основном он использует два неупорядоченных списка для создания вкладок (один для вкладок, один для содержимого).Прямо сейчас, когда вы нажимаете на вкладки, вывод переключается с "display: list-item;"«показать: нет;».Я пытаюсь изменить это на "position: absolute; left: -10000px;"и «позиция: относительная; слева: 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

Действие в этом скрипте происходит с .FadeIn и .Fadeout, которые анимируют непрозрачность. Fadeout применяет отображение: нет в конце анимации непрозрачности. Соответственно, FadeIn работает только с элементами, для которых установлено отображение: нет. Fadein просто не будет работать с видимостью: скрытый или непрозрачный: 0. Посмотрите документацию по jquery, в основном это очень хорошо.

Итак, вы хотите заменить изменение позиции CSS для этих двух строк кода. Существует множество способов сделать это, в основном в зависимости от того, хотите ли вы, чтобы элементы анимировались со страницы, просто прыгайте туда.

Кроме того, к вашему сведению Самый простой способ поделиться подобным материалом для устранения неполадок - создать jsfiddle с сокращенным подмножеством вашего кода, просто с соответствующими материалами, и тогда каждый может отмахнуться от него, пока он не заработает. :)