1. <div id="wrapper">
  2. <input type="radio" name="switch" id="tab-1" checked>
  3. <input type="radio" name="switch" id="tab-2">
  4. <input type="radio" name="switch" id="tab-3">
  5. <input type="radio" name="switch" id="tab-4">
  6. <input type="radio" name="switch" id="tab-5">
  7. <ul class="tabBtn">
  8. <li><label for="tab-1">タブ1</label></li>
  9. <li><label for="tab-2">タブ2</label></li>
  10. <li><label for="tab-3">タブ3</label></li>
  11. <li><label for="tab-4">タブ4</label></li>
  12. <li><label for="tab-5">タブ5</label></li>
  13. </ul>
  14. <div class="tabContents">
  15. <section>タブコンテンツ1</section>
  16. <section>タブコンテンツ2</section>
  17. <section>タブコンテンツ3</section>
  18. <section>タブコンテンツ4</section>
  19. <section>タブコンテンツ5</section>
  20. </div>
  21. </div>
  1. /* 略 */
  2. /* :::::: button :::::: */
  3. .tabBtn {
  4. display: table;
  5. width: 100%;
  6. margin: 0 0 1px;
  7. padding: 0;
  8. }
  9. .tabBtn li {
  10. display: table-cell;
  11. width: 20%;
  12. border-right: 1px solid #fff;
  13. background-color: #20b2aa;
  14. text-align: center;
  15. vertical-align: middle;
  16. }
  17. .tabBtn li:last-child {
  18. border-right: 0;
  19. }
  20. .tabBtn li label {
  21. display: block;
  22. cursor: pointer;
  23. padding: 10px 0;
  24. color: #fff;
  25. transition: background-color .3s;
  26. }
  27. .tabBtn li label:hover {
  28. background-color: rgba(205,92,92,.5);
  29. }
  30. /* :::::: mechanism :::::: */
  31. .tabContents section {
  32. opacity: 0.1;
  33. text-align: center;
  34. transition: opacity 0.3s;
  35. }
  36. #tab-1:checked ~ .tabBtn li [for="tab-1"],
  37. #tab-2:checked ~ .tabBtn li [for="tab-2"],
  38. #tab-3:checked ~ .tabBtn li [for="tab-3"],
  39. #tab-4:checked ~ .tabBtn li [for="tab-4"],
  40. #tab-5:checked ~ .tabBtn li [for="tab-5"] {
  41. background-color: #cd5c5c;
  42. }
  43. #tab-1:checked ~ .tabContents section:nth-child(1),
  44. #tab-2:checked ~ .tabContents section:nth-child(2),
  45. #tab-3:checked ~ .tabContents section:nth-child(3),
  46. #tab-4:checked ~ .tabContents section:nth-child(4),
  47. #tab-5:checked ~ .tabContents section:nth-child(5) {
  48. opacity: 1;
  49. background-color: #fff;
  50. }
タブコンテンツ1
タブコンテンツ2
タブコンテンツ3
タブコンテンツ4
タブコンテンツ5