1

我正在使用 jQuery Tabs 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'
                    });
                });
            }

        });
    });
});
4

1 回答 1

2

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

于 2011-05-04T15:31:53.400 回答