将jQuery函数集成到另一个in-Tabs UI中

我试图将一个函数集成到另一个函数中，对此感到困惑

我要做的是添加一个jQuery函数，它将调用一个随机报价，我希望该函数在jQuery选项卡UI中的选项卡更改时启动

这是随机报价函数：

$.get('quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });

$(document).ready(function () {
    var $tabs = $("#tabs").tabs({

        fx: {
            opacity: 'toggle'
        },

        select: function (event, ui) {
            $(".entry-content").hide();

            $('div#quotescontainer').load('quotes.html', function () {
                var $quotes = $(this).find('div.quote');
                var n = $quotes.length;
                var random = Math.floor(Math.random() * n);
                $quotes.hide().eq(random).fadeIn();
            });
        }
    });
});

下面是tabsinit（以及另一个在选项卡更改时折叠div的函数）：

quotes函数是否需要先调用变量

而且，如何使quote div在更改quotes时也使用fx不透明效果

编辑4/27/11

这将在函数中工作并使用fx效果：

$.get('quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });

$(document).ready(function () {
    var $tabs = $("#tabs").tabs({

        fx: {
            opacity: 'toggle'
        },

        select: function (event, ui) {
            $(".entry-content").hide();

            $('div#quotescontainer').load('quotes.html', function () {
                var $quotes = $(this).find('div.quote');
                var n = $quotes.length;
                var random = Math.floor(Math.random() * n);
                $quotes.hide().eq(random).fadeIn();
            });
        }
    });
});

---

下面是我如何监视选项卡上的更改，然后启动报价功能

$("#tabs ul li a").click(function(e) {
  update_quote();
}); 

function update_quote() {
    $.get('quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').fadeOut();
        $('.quotes').html(quotes[idx]);
        $('.quotes').fadeIn();
    });
}

---

update_quote函数可以被清理并简化，我将它保留得非常详细，以便您可以看到如何更新它。您还可以链接jquery效果。

代码应该放在花括号内

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
            // <-- code goes here
        }                  //I assume it goes near here, but no luck <-- NO!
    }); 
});

---

与其使用上面的JohnP示例中的click函数，不如在选项卡的选择中包含update_quote（）函数调用。啊，效果很好。在这里学习。jsfiddle是一个很好的工具。现在唯一的问题是完全重新加载页面，或者第一次访问页面时，quotes div为空，这我可以理解，因为没有启动任何选项卡。现在我想知道是否有一种方法可以在

#quoteContainer

的首页加载中包含一些静态文本，即“欢迎…”而不是随机引用？@songdogtech。“show”实际上也会在页面加载时触发选择“仅当有人单击时才会激发”。您也可以将文本放在选项卡本身中，以便在默认情况下显示内容。