<div>
  <input class="hidden" type="radio" name="a" id="a">
  <input class="hidden" type="radio" name="a" id="b">
  <p>
    <label class="button1" for="a">tab1</label>
    <label class="button2" for="b">tab2</label>
  </p>
  <p class="text1">
    タブ<span style="color: red;">1</span>の場合のテキストです。
  <p>
  <p class="text2">
    タブ<span style="color: red;">2</span>の場合のテキストです。
  <p>
</div>
.hidden {
display: none;
}
.text1, .text2 {
  display: none;
}
#b:checked ~ .text2 {
  display: block;
}
#a:checked ~ .text1 {
  display: block;
}
#b:checked ~ p .button2 {
  background-color: green;
}
#a:checked ~ p .button1 {
  background-color: green;
}
p {
  display: flex;
}
label {
  color: white;
  width: 50px;
  text-align: center;
  display: block;
  background-color: blue;
}
label:first-child {
  margin-right: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.