我有以下标记:
<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>
我想使用 Accordion 或 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 的网络环境中)。
我有以下功能:
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");
}
});
最佳答案
我不是正是你在找什么，但有一个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 用作 anchor 元素，无论哪种方式最合适。
关于javascript - jQuery Accordion/Tabs - 在加载内容时调用不同的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2916236/