Javascript Tabber在执行onLoad函数时出错

Question

我有一个使用Tabber.js的网页。我希望能够链接到一个页面，并将其切换到正确的选项卡，以便显示所需的内容。

我添加了以下JS代码来选择选项卡（为了简化示例，硬编码到第三个选项卡）：

function SelectTab() {
    alert("SelectTab started"); /*---- debugging cp1 ----*/
    document.getElementById('myTab1').tabber.tabShow(2);
    alert("SelectTab done");    /*---- debugging cp2 ----*/
}

如果我在表单中添加一个按钮来运行SelectTab（），它会正常工作，页面会切换到所需的选项卡。问题是我希望在加载页面时发生这种情况。（我不能在HTML BODY标记中使用"onload"，因为它试图在创建选项卡之前运行，正如预期的那样。）所以我想在加载选项卡之后使用tabber.js"onload"选项来运行脚本。为此，我正在做以下工作：

<script language="javascript" type="text/javascript">
var tabberOptions = {'onLoad':function(){SelectTab();}};
</script>
<script type="text/javascript" src="tabber.js"></script>

一旦我这样做，我的代码就会崩溃。具体来说，我得到了错误：

TypeError:document.getElementById（…）.tabber未定义

这发生在SelectTab功能中；行"cp1"执行，但不执行"cp2"。然而，失败的不仅仅是"onLoad"；如果我定义了onLoad来运行该函数，那么SelectTab在单击调用它的按钮时也会失败。

如果我将选项卡onLoad选项更改为：

var taberOptions=｛'onLoad'：function（）｛alert（"Tabber Loaded"）；｝｝

…然后，当手动调用SelectTab函数时，它会再次工作。我还尝试过更改选项卡onLoad选项以调用不同的函数，但它仍然会破坏SelectTab（）代码。

关于为什么定义一个在加载taber.js时执行的函数会导致这种行为，有什么想法吗？

Answer 1

尝试交换脚本的顺序

<script type="text/javascript" src="tabber.js"></script>
<script language="javascript" type="text/javascript">
    var tabberOptions = {'onLoad':function(){SelectTab();}};
</script>

Answer 2

我放弃了让选项卡选项"onload"工作。我能说的最好的一点是，它为什么不起作用：一旦它被调用，为选项卡定义的"div"就不再有效。我确实在'taber.js'脚本中找到了删除父div"…以防止内存泄漏…"（代码中的注释）的代码，这似乎阻止了tabberOptions和操作选项卡的脚本共存。

所以我尝试了一种不同的方法，它似乎很有效：

<script language="javascript" type="text/javascript">
var tabberLoaded = false;
var tabLoadIntervalId = setInterval("SelectTab()", 100);
function SelectTab() {
   if ( tabberLoaded == true ) {
      // alert("SelectTab started"); /*---- debugging cp1 ----*/
      document.getElementById('myTab1').tabber.tabShow(2);
      // alert("SelectTab done");    /*---- debugging cp2 ----*/
      clearInterval(tabLoadIntervalId);
   }
}

我修改了"taber.js"如下：

/* If the user specified an onTabDisplay function, call it now. */
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
tabberLoaded = true; /* This is the added line */
return this;

这样做可以使我的页面正常工作。我想做更多的测试，并确保我在taber.js中选择了最好的位置来设置标志。

Answer 3

好吧，只有在"tabber"完全加载时，您才能更改所选选项卡。为了确保所有内容都已加载，请在jQuery 中的窗口上使用.load()事件

<script language="javascript" type="text/javascript">
$(window).load(function(){
    document.getElementById('myTab').tabber.tabShow(2);
});
</script>

它的工作原理就像一个魅力