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

我在jQuery选项卡UI中使用下面的函数做了几件事——根据数据属性更改图像，拉取一个随机引号并折叠一些div——所有这些都是在jQuery UI选项卡中的选项卡更改上完成的。在第一个函数中，我还通过CSS更改布局

问题是文档就绪并没有真正起作用。如果我使用散列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'
                    });
                });
            }

        });
    });
});

在调用.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哈希，这意味着查看器将直接打开一个选项卡，并根据它所看到的内容触发其他函数。

我不确定您希望看到的文档是什么。准备好了吗？请注意，它不会在页面的每次更新时触发，仅在页面第一次加载时触发。这就是不起作用的地方吗？@Pekka:jQuery tabs为每个选项卡提供了一个可书签的URL，就像他在问为什么当他直接转到这个URL并加载页面时，这个URL不起作用一样。@Pekka，是的，我需要在每次加载页面时激发它。特别是当我从Wordpress中的一个帖子页面转到主URL时，即domain.com/2011/5/blahblahThanks much，这似乎就是问题所在。让我试试。啊，上面编辑的效果更好；CSS更改现在重新加载。但是现在图像交换和报价提取程序不会每次刷新；我还在做错事。这两个函数是否应该分别放在document.ready函数中？@songdogtech：我试图扩展我的答案以涵盖这些函数。请注意，我在技术上已经回答了您最初的问题；谢谢有一个额外的}；接近函数的末尾。现在引号会旋转。但是，总是有些事情：标题图像循环通过然后消失，我猜是通过显示：无？但是你明白了，谢谢。