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

Question

使用浮动、flexbox 或表格，有不同的方法可以将两个相邻块的大小设置为相同的高度或相同的宽度，这取决于它们的内容，而无需使用 JavaScript。

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

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

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

Answer 1

使用 flexbox 和visibility: collapse（参见W3C 草案），可以隐藏内容，同时仍然考虑占用的空间。

以下示例适用于 IE 和 Firefox，而不是（还）适用于 Safari、Opera 和 Chrome [进行中]。

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>

Answer 2

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

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

因此，为了允许正常的流程，我添加了一个包装器和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>