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

Question

我在 jQuery 选项卡 UI 中使用以下功能做几件事 - 根据数据属性更改图像，拉随机引用并折叠一些 div - 所有这些都在 jQuery UI 选项卡中的选项卡更改上。我还在第一个函数中通过 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()之前尝试绑定

编辑

那是因为您正在为这些功能使用“选择”事件。这意味着它们仅在单击选项卡时触发。您还希望它们在用户通过 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 哈希（意味着查看器正在直接打开一个选项卡）并根据它看到的内容触发其他函数。