如何创建一个在 IE 下不会中断并允许我做我想做的事情的选项卡式界面？

Question

我目前正在创建一个选项卡式界面，其中一个选项卡包含丰富的类似 Flash 的内容，其余选项卡充满简单文本。这里有点长，但我几乎用尽了我的选择，想让你知道我已经尝试过什么。我觉得应该有一个解决方案来解决我的问题，但我不知道还可以尝试什么。

审判
为了创建我的选项卡，为了方便起见，我决定使用 jQuery，并且很高兴地制作通常的非 UI/工具选项卡结构。也就是说，像这样：

<div class="page">
    <div class="tabs">
        <ul class="nav">
            <li href="#tab_1">Tab one</li>
            <li href="#tab_1">Tab one</li>
        </ul>
    </div>
    <div class="content">
        <div id"tab_1">Stuff</div>
        <div id"tab_2">Words</div>
    </div>
</div>

从这里开始，我拥有所有常用的 CSS 和 jQuery 业务来实现这一点，并对结果感到满意。也就是说，直到我尝试添加丰富的内容。它加载得很好，我真的不能抱怨这一点，但我被要求这样做，以便丰富的内容在离开另一个选项卡并返回时不会重新加载。

这让我困惑了一段时间，但是在阅读了 jQuery 关于 .hide() 和 .show() 函数的文档后，我就很清楚发生了什么。 hide() 和 show() 相当于 display = "none" display = "block" ，因此每次我进行这些调用时，我的内容都会被破坏并需要重新加载。

为了清楚起见，我将向您展示我的 jQuery 的样子：

$(document).ready(function() {
    var tabContainers = $('div.content > div');   
    tabContainers.hide().filter(':first').show();

    $('div.tabs ul.nav a').click(function () {

    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    //selected is a CSS attribute to highlight the tabs
    $('div.tabs ul.nav a').removeClass('selected');
    $(this).addClass('selected');
    return false;
    }).filter(':first').click();
});

此时，我对上面的代码进行了一些更改，我开始设置可见性，而不是在丰富的内容上使用 show() 和 hide()。所以现在我的简单内容使用 .hide() 和 .show() 因为它不需要重置，而我的丰富内容使用可见性。不幸的是，现在它全部消失并很好地重新出现，但与丰富内容页面有很大差距，因为可见性并没有从物理上删除页面中的内容，只是它的可见性。

然后我进行了更多研究，发现了 jQuery 中的 .height() 调用，并决定尝试使用它。它起作用了。我能够调用 height() 来压缩 div，然后重新扩展它以适合当前内容。

我很高兴在 FF 和 Chrome 中看到这个作品，但后来我在 IE8 中打开了它。没有什么。巨大的差距仍然存在。垂头丧气的我再次上网，发现这是因为我的页面顶部缺少标准的 DOCTYPE 调用，所以 IE 运行在 Quirks 模式下。我做了改变，砰的一声，它起作用了。

现在有趣的部分是，这实际上是为了在 Facebook 中运行。我已经在测试运行的 php 文件中包含了一些 HTML，并将其替换为这个新代码。我打开了 Chrome、FF 和 IE，结果 Chrome 和 FF 都可以工作了；另一方面，IE 也有我刚刚摆脱的旧的巨大差距。

问题
此时我不确定还可以尝试什么。我希望 jQuery 工具选项卡或 jQuery UI 选项卡可能会有一些用处，但它们似乎都会破坏内容并重新加载它。我最满意的是创建一个不需要像这样调整 div 大小的界面，但此时我只想要一些功能性的东西。

有没有什么方法可以使调整大小工作或使选项卡在切换到另一个选项卡时不会破坏内容？如果您查看各种 Facebook 游戏，其中一些游戏似乎具有我正在寻找的选项卡式界面行为，但我只是不确定如何复制它。谁能指出我的新方向或建议解决办法吗？

Answer 1

这是来自 jQuery UI：

...我的滑块、Google 地图、sIFR 等在以下情况下不起作用放置在隐藏（非活动）选项卡中？

有一个简单的解决方法。使用离左技术隐藏不活动的选项卡面板。例如，在样式表中将类选择器“.ui-tabs .ui-tabs-hide”的规则替换为

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

然后正常隐藏选项卡。