0

我用prototype.js库玩了一个steriotab系统，一切正常，除了steriotabs容器下的下一个DIV在转到下一个选项卡时显示得像一个闪光..我知道它有点难以理解..在这里你可以在他们的网站上看到它http://stereointeractive.com/blog/code/prototype-tabs/

您可以通过连续更改四个选项卡（功能、设置、配置、下载）三四次来看到这一点。评论部分将在导航选项卡（功能、设置、配置、下载）下方快速显示。

我认为问题在于当它进入下一个选项卡时，当前选项卡是 display:none 并且在此期间当然没有任何内容（1 或 2 秒），因此下一个 html 代码块将出现在导航下方的顶部。

这个javascript可能会导致问题..

activate: function(tab) {
    var tabName = tab.id.replace(this.options.ids.tab,'');
    this.currentPanel = this.options.ids.panel+tabName;
    if (this.showPanel == this.currentPanel) {
      return false;
    }

    if (this.showPanel) {
      if (this.options.effects) {
        new Effect.Fade(this.showPanel, {queue: 'front'});
      } else {
        $(this.currentPanel).hide();
      }
    }

    if (this.options.effects) {
      new Effect.Appear(this.currentPanel, {queue: 'end'});
    } else {
      $(this.showPanel).show();
    }

    this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
    tab.addClassName(this.options.classNames.tabActive);
    this.showPanel = this.currentPanel;
  }

你们有什么想法吗？

4

1 回答 1

0

您的怀疑是正确的，您获得闪存的原因是几毫秒，那里没有容器阻止对象下方的内容。您可以考虑的一种选择是在淡化容器的同时将其向上滑动（查看脚本中的并行效果），这样它就不会随着内容的消失而变得不和谐。

于 2012-05-05T18:26:04.793 回答