Question

注意：不能使用第三方标签系统，所以请不要推荐。

在我的页面上，我有几个<div>和几个标签。每个div可以属于多个选项卡。例如，所有div都属于'All'选项卡，然后一些div属于'Today'选项卡，有些div属于'Tomorrow'选项卡等。

我想要做的是，当用户点击Today选项卡时，我想只显示属于该选项卡的div。当他单击任何其他选项卡时，之前选项卡的div应该被隐藏，并且应该显示所选选项卡的div。到目前为止，相当标准的标签行为。

然而，如果不同的话，可以在多个标签之间共享一个div。

我在想，每当选择一个新选项卡时，我都可以简单地遍历最后一个选定选项卡的所有div，隐藏它们，然后遍历当前选项卡的div并显示它们。

但是我想知道是否会有更高效/更少CPU密集的方法。此外，此方法将导致某些div仅被隐藏，然后如果它们在最后一个选项卡和当前选项卡之间共享，则立即再次显示。（例如：div_111可以在今天和明天之间共享。用户点击今天，显示div_111。然后他点击明天，div_111首先隐藏，然后再显示）。

有什么建议吗？

Answer 1

你要注意的是重绘。当您添加或删除元素时，浏览器必须弄清楚更改如何影响页面上的每个其他元素，并相应地重新定位/调整每个元素的大小。这个过程几乎总是DOM操作中最昂贵的部分 - 当然比确定哪些元素放在哪个标签中更贵。

浏览器会尝试优化重绘 - 它们会尽可能少地重绘页面，有时会将多个更改分组到同一重绘中。但是，最好自己动手。通过首先从DOM中删除父节点，然后进行所有更改，然后重新附加它，您可以确保不会有多于两个重绘，无论您添加或删除多少个节点。这是一个简单的例子：

var container = document.getElementById('container'),
    buffer = document.createDocumentFragment(),
    newNodes = tabs[selection], // an array or object, generated at page load,
                                // containing all divs that show up in this tab
    i, div;
document.body.removeChild(container);
for (i = 0; div = newNodes[i]; i++) {
    buffer.appendChild(div); // if div is in container then it will be
                             // automatically removed
}
container.innerHTML = ''; // probably more efficient to remove nodes individually
container.appendChild(buffer);
document.body.appendChild(container);

根据您的布局，删除container可能会导致其下方的内容暂时跳起来。如果您想要抛光外观，可以修复container父级的高度，或者使用container.parentNode.replaceNode()在其位置插入占位符。

如果您最小化重绘，那么您应该没有任何效率问题。但是，如果您仍想调整，请确保优化内容插入逻辑。最简单的方法可能是将与单个选项卡关联的内容与显示在多个选项卡中的内容隔离开来，可能是通过为每种内容类型使用不同的容器。请记住，最好的解决方案是不再需要概括的解决方案。

使用Javascript / Jquery创建有效的Tab切换

1 个答案: