1

我有一个使用 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>

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

类型错误：document.getElementById(...).tabber 未定义

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

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

var tabberOptions = {'onLoad':function(){alert("Tabber Loaded");}};
...然后 SelectTab 函数在手动调用时再次起作用。我还尝试更改 tabber onLoad 选项以调用不同的函数，但它仍然会破坏 SelectTab() 代码。

关于为什么在 tabber.js 加载时定义要执行的函数会导致这种行为的任何想法？

4

3 回答 3

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

于 2013-06-26T14:48:00.720 回答
0

尝试交换脚本的顺序

<script type="text/javascript" src="tabber.js"></script>
<script language="javascript" type="text/javascript">
    var tabberOptions = {'onLoad':function(){SelectTab();}};
</script>
于 2013-06-24T20:16:59.783 回答
0

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

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

它就像一个魅力

于 2013-09-02T12:10:06.023 回答