Javascript Tabber错误执行onLoad函数

时间:2013-06-24 20:06:34

标签: javascript tabs

我有一个使用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加载时定义要执行的函数的任何想法都会导致这种行为?

3 个答案:

答案 0 :(得分:0)

尝试交换脚本的顺序

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

答案 1 :(得分:0)

我放弃让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中的最佳位置来设置标志。

答案 2 :(得分:0)

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

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

它就像一个魅力