由纯 CSS 中最大面板内容大小的选项卡框

Question

使用浮动、flexbox 或表格，有不同的方法可以将两个相邻块的大小调整为相同的高度或相同的宽度，具体取决于它们的内容不使用 JavaScript。

我想知道是否有一种方法可以为选项卡框的面板实现相同的效果，一次只能看到一个。

因此，例如，如果一个面板是空的，它的大小（或至少它的背景）应该扩展到面板堆栈中最大面板的大小。

我的目的是防止标签框下方或旁边的元素在切换标签时跳转到不同的位置，但我不想假设面板内容的尺寸，因为它们是动态的。

Answer 1

在概念层面上，以及我如何理解您的问题，您将需要一个行结构，如表格或弹性框，其中相同行大小的兄弟姐妹相等。

由于每个面板的内容应该表现得好像它是单独的，它需要具有其容器的宽度，否则内容将开始环绕并影响其兄弟姐妹的高度。

所以为了允许正常的流程，我添加了一个包装器并将子项的数量乘以 nn 倍作为宽度，然后使用transform: translate 将它们拉到彼此之上，这样就可以在它们之间制作动画而无需什么都动。

这是一个使用flexbox的示例代码，我也推荐使用。

---

根据评论更新。

我们当然可以像制作网格时一样预先定义它，即在网格中设置所需的最大标签数量，然后它将使用最多该数量，此处定义为 12，但仅使用 7

今天可以使用，无需等待 Chrome :)

(function (count) {
  var button = document.querySelector('button');
  var children = document.querySelectorAll('.wrapper div');
  button.addEventListener('click', function() {
    children[count].classList.toggle('show');
    count++; if (count == children.length) count = 0;
    children[count].classList.toggle('show');
  })
})(0);

html, body {
  margin: 0;
}
.container {
  overflow: hidden;
}
.wrapper {
  display: flex;
  background: lightgray;
  width: 1200%;
}
.wrapper div {
  position: relative;
  width: calc(100% / 12);
  background: lightblue;
  padding: 10px;
  transition: opacity 1s, transform 1s;
  opacity: 0;
}
.wrapper div.show {
  opacity: 1;
}

.wrapper div:nth-child(2)  { transform: translate(-100%); }
.wrapper div:nth-child(3)  { transform: translate(-200%); }
.wrapper div:nth-child(4)  { transform: translate(-300%); }
.wrapper div:nth-child(5)  { transform: translate(-400%); }
.wrapper div:nth-child(6)  { transform: translate(-500%); }
.wrapper div:nth-child(7)  { transform: translate(-600%); }
.wrapper div:nth-child(8)  { transform: translate(-700%); }
.wrapper div:nth-child(9)  { transform: translate(-800%); }
.wrapper div:nth-child(10) { transform: translate(-900%); }
.wrapper div:nth-child(11) { transform: translate(-1000%); }
.wrapper div:nth-child(12) { transform: translate(-1100%); }


/*  styling stuff  */
button {
  padding: 5px 10px;
  margin-bottom: 10px;
}

<button>Toggle</button>

<div class="container">
  <div class="wrapper">
    <div class="show">
      1. Some text
    </div>
    <div>
      2. Some more text<br> Some more text<br>
    </div>
    <div>
      3. Some even more text<br> Some even more text<br> Some even more text<br> Some even more text<br> 
Some even more text<br>     </div>
    <div>
      4. Some more text<br> Some more text<br>
    </div>
    <div>
      5. Some text
    </div>
    <div>
      6. Some more text<br> Some more text<br>
    </div>
    <div>
      7. Some even more text<br> Some even more text<br> Some even more text<br> Some even more text<br> 
Some even more text<br>     </div>
  </div>
  The height is kept so text like this does not move 
</div>

Answer 2

使用 flexbox 和visibility: collapse（参见W3C draft），可以在仍然考虑占用空间的情况下隐藏内容。

以下示例适用于 IE 和 Firefox，但（尚未）适用于 Safari、Opera 和 Chrome [in progress]。

var count = 0;
var children = document.querySelectorAll('.container div');
document.querySelector('button')
.addEventListener('click', function () {
  children[count++ % 4].classList.toggle('show');
  children[count   % 4].classList.toggle('show');
});

.container {
  display: flex;
  overflow: hidden;
}

.container div {
  visibility: collapse;
}

.container div.show {
  visibility: visible;
}

<button>toggle</button>

<div class="container">
  <div class="show">
    1. Some text
  </div>
  <div>
    2. Some more text<br/>
    Some more text
  </div>
  <div>
    3. Some even more text<br/>
    Some even more text<br/>
    Some even more text<br/>
    Some even more text<br/>
    Some even more text
  </div>
  <div>
    4. Some more text<br/>
    Some more text
  </div>
</div>

<p>Text below, does not move on toggle.</p>