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 is undefined

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

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

var tabberOptions = {'onLoad':function(){alert("Tabber Loaded");}};

...然后手动调用时，SelectTab功能再次起作用。我也尝试更改tabber onLoad选项以调用另一个函数，但它仍然会破坏SelectTab（）代码。

关于为什么在tabber.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

我放弃让tabberOptions'onload'工作。最好的我可以告诉它为什么不起作用：一旦被调用，为tabber选项卡定义的'div'就不再有效了。我确实在'tabber.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);
   }
}

我修改了'tabber.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;

这样做让我的页面正常工作。我想做更多的测试，并确保我选择了tabber.js中的最佳位置来设置标志。

Answer 3

好吧，只有在'tabber'满载时才能更改选定的标签。为确保所有内容都已加载，请在jQuery窗口中使用.load()事件

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

它就像一个魅力

Javascript Tabber错误执行onLoad函数

3 个答案: