Question

我正在使用jQuery Tabs UI中的以下函数做几件事 - 根据数据attr更改图像，拉随机引用并折叠一些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()

之前尝试绑定

修改

那是因为您正在为这些功能使用“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哈希值的函数（意味着查看器直接打开选项卡）并根据它看到的内容触发其他函数。

当document.ready不代表document.ready时

1 个答案: