即使有边框，所有标签的高度也应保持不变

Question

我有一个选项卡列表，它的整个宽度必须达到1024px，并且选项卡应占用相等的空间。问题是我需要在活动标签上设置边框，并且当活动标签的标签只有一行文本时，该标签项目的高度与标签的多行标签高度不同。

标签的高度应始终相同，因此不会发生此问题引起的边框跳跃。为此，我需要仅使用CSS的解决方案，最好不要使用制表符高度的固定值。这些元素被建模为组件，它们需要具有通用样式。选项卡列表使用的是display: flex，而我一直在尝试使用flexbox属性解决问题，但到目前为止还是无济于事。

html

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

$(document).ready(function() {
  document.getElementById("defaultOpen").click();
});

* {
  box-sizing: border-box;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
}


/* Style the buttons that are used to open the tab content */

.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  flex: 1;
  font-size: 14px;
  line-height: 16px;
  // transition: 0.3s;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
  border-bottom: 4px solid #000;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent {
  max-width: 1024px;
  margin: 0 auto;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}


/* Go from zero to full opacity */

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London<br>City</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo<br>City</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

示例：https://codepen.io/anon/pen/pZzBoK

Answer 1

将.button边框默认设为透明，然后在激活时为其设置颜色。

.tab button {
    ...
    border: none;
    border-bottom: 4px solid transparent;
    ...
}

然后

.tab button.active {
    ...
    border-bottom-color: #000;
}

https://codepen.io/anon/pen/rrNNOY

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

$(document).ready(function () {
  document.getElementById("defaultOpen").click();
});

* {
  box-sizing: border-box;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    border: none;
    border-bottom: 4px solid transparent;
    outline: none;
    cursor: pointer;
    padding: 10px;
    flex: 1;
    font-size: 14px;
    line-height: 16px;
    // transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
    border-bottom-color: #000;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.tabcontent {
    max-width: 1024px;
    margin: 0 auto;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London<br>City</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo<br>City</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 2

我通常通过在所有标签上设置透明边框，然后为活动标签设置颜色来解决此问题。