tab-css

by interlife

HTML

<div class="tab_wrap">
  <input type="radio" name="tab" id="tab1" checked>
  <input type="radio" name="tab" id="tab2">
  <input type="radio" name="tab" id="tab3">

  <ul id="js_tab_nav" class="tab_nav tab_nav_1">
    <li><label for="tab1" class="tab_item active">TAB1</label></li>
    <li><label for="tab2" class="tab_item ">TAB2</label></li>
    <li><label for="tab3" class="tab_item ">TAB3</label></li>
  </ul>
  <ul class="tab_content tab_content_1">
    <li class="tab_item tab1 active">TAB1の中身です</li>
    <li class="tab_item tab2">TAB2の中身です</li>
    <li class="tab_item tab3">TAB3の中身です<br>TAB3の中身です<br>TAB3の中身です</li>
  </ul>
</div>

SCSS

.tab_wrap {
  width: 50%;
  @mixin tabs($tab_num) {
    &~ {
      .tab_nav li:nth-child(#{$tab_num}) label {
        background: rgba(#000, .7);
      }
      .tab_content li:nth-child(#{$tab_num}) {
        display: block;
      }
    }
  }
  #tab1:checked {
    @include tabs(1);
  }
  #tab2:checked {
    @include tabs(2);
  }
  #tab3:checked {
    @include tabs(3);
  }
}

//初期背亭
.tab_nav {
  display: flex;
  li {
    width: 33.3333%;
  }
  .tab_item {
    padding: .5em 1em;
    display: block;
    background: rgba(#000, .5);
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
}

.tab_content {
  position: relative;
  background: rgba(#ccf, .5);
  li {
    padding: 2em 1em;
    display: none;
  }
}