Question

我有以下标记：

<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");
    }
});

Answer 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表示“需要为每个标签设置不同的功能”，但无论您需要做什么，调用外部函数等，您都可以在此处执行此操作。如果您需要在ui.tab上进行切换，可以使用href作为锚元素，无论哪种情况最合适。

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

1 个答案: