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

Posted 2023-03-14

【中文标题】由纯 CSS 中最大面板内容大小的选项卡框

【英文标题】：Tab box sized by biggest panel content in pure CSS

【发布时间】：2017-02-22 14:25:22

【问题描述】：

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

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

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

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

【问题讨论】：

请与我们分享您的代码或更好地创建一些示例，否则我们将很难为您提供帮助。

一种方法是并排排列选项卡面板并在其父级上设置overflow: hidden。然后在选项卡切换时，将更改父级的 x 偏移量，以便选定的选项卡将移动到可见区域。但是这样，标签框的宽度需要固定，并且每个面板的 x 偏移量也需要硬编码，因此 css 必须针对不同数量的面板进行更改:(

@Daniel，我们需要查看您的代码。请用它编辑您的问题。

@Option 因为这是一个概念问题，所以还没有代码。显示意外行为的选项卡框实现示例可以是foundallovertheweb。

@daniel，恐怕没有人会为利益编写自定义代码，因为没有人尝试自己这样做。

【参考方案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>

【讨论】：

这正是我在上面的第一条评论中描述的方法。它解决了这个问题，但是这样一来，就不能只添加新面板而不必重新编写所有 left 属性。

@DanielWacker Thas 是一个简单的解决方法...更新了我的答案

@DanielWacker 所以现在这实际上解决了你所有的问题

【参考方案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>

【讨论】：

这将很快成为更好的解决方案 :) ... 赞成