0

我使用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 运行。

4

2 回答 2

0

好吧，我用 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 脚本。我将打开一个新问题，看看是否有人对此有答案。

于 2013-03-19T17:58:12.403 回答
0 
'onLoad': function(argsObj) {
    /* Display an alert only after tab */
    if (argsObj.tabber.id == 'tab') {
      alert('Finished loading tab!');
    }
  }

默认情况下选择一个选项卡。然后在完成加载该选项卡后，它将显示一条消息。

看这里

于 2013-03-18T12:35:36.513 回答