Question

我使用http://www.barelyfitz.com/projects/tabber/上显示的tabber脚本来提供标签页。通常它运行良好，我唯一的抱怨是在内容完全加载之前标签不会显示，然后在屏幕正确写入时会跳转。（请参阅www.littlehotels.co.uk/spain/noves.php了解我的意思。）

我认为解决方案是隐藏包含所有标签内容的div，例如

<div class="tabber" id="tabber" style="display:none">

然后用一个由

调用的小javascript函数显示它

<body onLoad="ShowTabber()">

javascript本身就是

<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
 }
</script>

我的小功能似乎停止了外部javascript（tabber.js）的工作，因为该页面显示了所有选项卡的内容，而顶部没有标签本身。这与我从页面中删除对外部脚本的引用的结果相同。

我做错了什么？

更多解释：缺少tabber.js文件时，页面会一个接一个地显示所有选项卡的内容（如您所料）。如上所述运行脚本具有完全相同的效果;因此我得出结论，该脚本阻止了主要的javascript运行。

Answer 1

'onLoad': function(argsObj) {
    /* Display an alert only after tab */
    if (argsObj.tabber.id == 'tab') {
      alert('Finished loading tab!');
    }
  }

默认选择一个标签。然后在完成加载该标签后，它将显示一条消息。

see here

Answer 2

好吧，我用jQuery解决了这个问题，但现在又引发了另一个问题。

为了回应PSR，我更深入地研究了jQuery。转换到.tabs（）会太复杂，但我确实使用jQuery来隐藏并在适当的时刻显示一些div。

我在tabber div的前面放了一条简单的小线来显示“正在加载”的消息。

<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>

然后我把这个脚本放在jQuery行下的头部。

<script type="text/javascript">
    $(document).ready(function(){
        $("#tabber").hide();
        $("#loading").hide();
        $("#loading").fadeIn(1000);
     });
    $(window).load(function(){
        $("#loading").hide();
        $("#tabber").fadeIn(300);
     });
function checkResize(id){
      var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
      alert(win);
}
</script>

这很好用，但是有几个标签的内容都有iframe，这个脚本会破坏我在那些iframe上使用的autoResize脚本。我会打开一个新问题，看看是否有人对此有答案。

简单的Javascript无法正常工作

2 个答案: