当 document.ready 并不意味着 document.ready 时

Question

我正在使用 jQuery Tabs UI 中的以下功能执行几项操作 - 根据数据属性更改图像、拉动随机引用并折叠一些 div - 所有这些都在 jQuery UI Tabs 中的选项卡更改上进行。我还在第一个函数中通过 CSS 更改布局。

问题是准备好的文档并没有真正起作用。如果我使用 #hash URL 从另一个页面返回 0 选项卡，则第一个绑定事件将被跳过，并且 CSS 不会更改。

有没有办法让 document.ready 真正发挥作用？并使 CSS 变化保持一致？

$(document).ready(function () {

    $('#tabs').bind('tabsshow', function (event, ui) {

    var $tabs = $("#tabs").tabs();

        $('#wrapper').css('width', '586px'); //show certain CSS for the 0 tab
        $('#wrapper').css('margin', '80px auto');
        $('#col2, #footer, #headermain h1, .hide').css('display', 'none');

        if (ui.index != 0) {
            $('#wrapper').css('width', '875px'); //show certain CSS for all other tabs
            $('#wrapper').css('margin', '15px auto');
            $('#col2, #footer, #headermain h1, .hide').css('display', 'block');

        }
    });

    $(function () { //tab change fx
        $('#tabs').tabs({
            fx: {
                opacity: 'toggle'
            },


            select: function (event, ui) {
                $(".entry-content").hide('fast'); //collapse any open divs in other tabs on tab change
                $(".bkcontent").hide('fast');


                $('div#quotescontainer').load('quotes.html', function () {
                    var $quotes = $(this).find('div.quote'); //pull a random quote for the sidebar
                    var n = $quotes.length; //on any tab change
                    var random = Math.floor(Math.random() * n);
                    $quotes.hide().eq(random).fadeIn();
                });

                var img = $(ui.panel).data("image");
                $("#headerwrapper").animate({
                    opacity: 'toggle'
                }, function () { //change header image to the 
                    $(this).css("background-image", "url(" + img + ")") //data attr of the tabs div
                    .animate({
                        opacity: 'toggle'
                    });
                });
            }

        });
    });
});

Answer 1

http://bugs.jqueryui.com/ticket/3867

在调用 之前尝试绑定.tabs()

编辑

那是因为您正在为这些函数使用“select”事件。这意味着它们仅在单击选项卡时触发。您还希望当用户通过 URL 中的哈希直接进入选项卡时触发它们。

我认为使用 show 而不是 select 可能会让您走上正轨。

我还认为这样做可能更有意义：

var $tabs = $('#tabs').bind('tabsshow', function (event, ui) {

            $('#wrapper').css('width', '586px'); //show certain CSS for the 0 tab
            $('#wrapper').css('margin', '80px auto');
            $('#col2, #footer, #headermain h1, .hide').css('display', 'none');

            if (ui.index != 0) {
                $('#wrapper').css('width', '875px'); //show certain CSS for all other tabs
                $('#wrapper').css('margin', '15px auto');
                $('#col2, #footer, #headermain h1, .hide').css('display', 'block');

            }
        }).tabs({
            fx: {
                opacity: 'toggle'
            },


            show: function (event, ui) {
                $(".entry-content").hide('fast'); //collapse any open divs in other tabs on tab change
                $(".bkcontent").hide('fast');


                $('div#quotescontainer').load('quotes.html', function () {
                    var $quotes = $(this).find('div.quote'); //pull a random quote for the sidebar
                    var n = $quotes.length; //on any tab change
                    var random = Math.floor(Math.random() * n);
                    $quotes.hide().eq(random).fadeIn();
                });

                var img = $(ui.panel).data("image");
                $("#headerwrapper").animate({
                    opacity: 'toggle'
                }, function () { //change header image to the 
                    $(this).css("background-image", "url(" + img + ")") //data attr of the tabs div
                    .animate({
                        opacity: 'toggle'
                    });
                });
            }


    });

我的括号正确吗？ :)

无论如何，重要的是这些函数需要在选项卡内容显示时调用，而不仅仅是选择。如果 show 不起作用，您可能需要编写一个函数来查找 url 哈希（意味着查看器直接打开选项卡）并根据看到的内容触发其他函数。