табы на css

by Ksenia Polyakova

HTML

<div class="container">
  <input type="radio" name="t" id="one" checked>
  <input type="radio" name="t" id="two">
  <input type="radio" name="t" id="three">
  <div class="labels">
    <label for="one" data-id="one">1</label>
    <label for="two" data-id="two">2</label>
    <label for="three" data-id="three">3</label>  
  </div>
  <div class="contents">
    <div class="content" data-id="one">раз</div>
    <div class="content" data-id="two">два</div>
    <div class="content" data-id="three">три</div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.labels {
  box-sizing: border-box;
  display: flex;
}

input, .content {
  display: none;
}
label {
  display: inline-block;
  width: 33.33%;
  border: 1px solid gold;
}

.contents {
  box-sizing: border-box;
}

.content {
  box-sizing: border-box;
  width: 300px;
  border: 1px solid gold;
  height: 100px;
  border-top: none;
}

input#one:checked ~ .contents > .content[data-id="one"],
input#two:checked ~ .contents > .content[data-id="two"],
input#three:checked ~ .contents > .content[data-id="three"]
{
  display: block;
}
input#one:checked ~ .labels > label[data-id="one"],
input#two:checked ~ .labels > label[data-id="two"],
input#three:checked ~ .labels > label[data-id="three"]
{
  background-color: gold;
}