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