添加不带 javascript 的选项卡 4，只有 html 和 css

Question

我在 codepen.io 中使用笔。我想添加一个新标签，标签 4。但我不知道。你可以添加这个表吗？请这对我来说非常重要。我很迷茫:(

在这个网址中：https://codepen.io/PabloRoca/pen/paRKQZ/

谢谢

<p
   class="codepen"
   data-default-tab="html,result"
   data-embed-version="2"
   data-height="265"
   data-pen-title="Tabs CSS & HTML, no JS & Jquery Tabs"
   data-slug-hash="paRKQZ"
   data-theme-id="0"
   data-user="PabloRoca">
    See the Pen <a href="https://codepen.io/PabloRoca/pen/paRKQZ/">Tabs CSS & HTML, no JS & Jquery Tabs</a>
    by Pablo Roca (<a href="https://codepen.io/PabloRoca">@PabloRoca</a>) on <a href="https://codepen.io">CodePen</a>.
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js">
</script>

Answer 1

应该直截了当。无论如何请找到更新的codepen URL

  https://codepen.io/ragavanrajan/pen/RQKBPV

这是供您参考的代码

在 HTML 中：

<h2>It is a simple tabs model. Only CSS.<br/>Without js, bugs, position-absolute.</h2><br/>

<div class="tab-frame">
  <input type="radio" checked name="tab" id="tab1">
  <label for="tab1">tab1</label>

  <input type="radio" name="tab" id="tab2">
  <label for="tab2">tab2</label>

  <input type="radio" name="tab" id="tab3">
  <label for="tab3">tab3</label>

   <input type="radio" name="tab" id="tab4">
  <label for="tab4">tab4</label>

  <div class="tab">sample content 1</div>
  <div class="tab">sample content 2</div>
  <div class="tab">sample content 3</div>
  <div class="tab">sample content 4</div>
</div>

在 CSS 中：

div.tab-frame input{ display:none;}
div.tab-frame label{ display:block; float:left;padding:5px 10px; cursor:pointer}
div.tab-frame input:checked + label{ background:black; color:white; cursor:default}
div.tab-frame div.tab{ display:none; padding:5px 10px;clear:left}

div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked ~ .tab:nth-of-type(4)
{ display:block;}

body{width:600px;margin:20px auto;font-family:Arial;}