jQuery Accordion /Tabs - 在加载内容时调用不同的函数答案

【问题标题】：jQuery Accordion /Tabs - Call different function upon load of contentjQuery Accordion /Tabs - 在加载内容时调用不同的函数
【发布时间】：2010-05-26 19:48:06
【问题描述】：

我有以下标记：

<body>
    <div id="tabs" style="float: left">
        <ul>
            <li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li>
            <li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li>
            <li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li>
            <li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li>
            <li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li>
            <li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li>
        </ul>
        <div id="dynamicContent">
        </div>
    </div>
    <div class="demo-description">
        <p>Click tabs to see answers to Questions</p>
    </div>
</body>

我想使用手风琴或 UI 中的选项卡插件。加载事件完成后，我想调用一个 JavaScript 函数，但每个选项卡都有一个不同的函数——几乎就像为一个页面调用 onDocumentReady。

我有以下 JavaScript：

$(function() {
    $('#tabs').tabs().bind('tabsselect', function(event, ui) {
        console.log("Loading: ajax/question_" + ui.index + ".html");
        return true;    //Ensure that the tab gets selected
    });
);

这可以正确加载 Ajax 文件和所有内容，但是每当我尝试执行诸如评估 JS 中的语句之类的操作时，它似乎都被忽略了。有什么办法可以做到这一点，以便在加载文件后调用我的函数 - 每个选项卡都需要不同的函数。

在下面编辑：

实际上，切换确实缓解了我调用不同函数的问题。没想到……

但是，我所追求的是在每个用于日志记录的选项卡中都有一个空 div（如果我在没有 Firebug 的 Web 环境中）。

我有以下功能：

if (typeof console === 'undefined') {
    var console = { };
    console.log = function(msg) {
        $('#dynamicContent').append(createElement('p', msg));
    };
}

这应该将消息记录到加载到每个片段中的 div 中，但在加载新选项卡时不会完成任何记录。

我的标签设置如下：

$('#tabs').tabs({

    select: function(event, ui) {
        log.debug("Loading: ajax/question_" + ui.index + ".html");
    },

    show: function(event, ui) {
        log.debug("Finished Loading: ajax/question_" + ui.index + ".html");
    }
});

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

我不是完全你所追求的，但有一个tabsload event你可以使用，像这样：

$(function() {
  $('#tabs').tabs().bind('tabsselect', function(event, ui) {
    console.log("Loading: ajax/question_" + ui.index + ".html");
    return true;    //Ensure that the tab gets selected
  }).bind('tabsload', function(event, ui) {
    switch(ui.index) {
      case 0:
        //do something for first tab...
        break;
      case 1:
        //do something for second tab...
        break;
      //etc...
    }
  });
);

我使用switch statement 表示您的“需要为每个选项卡设置不同的函数”，但无论您需要做什么，调用外部函数等，您都可以在此处执行此操作。例如，如果您需要在href 上进行切换，您可以使用ui.tab 作为锚元素，无论哪种方式最合适。

【讨论】：