1. <div id="wrapper">
  2. <div id="tab-1" class="switch"></div>
  3. <div id="tab-2" class="switch"></div>
  4. <div id="tab-3" class="switch"></div>
  5. <div id="tab-4" class="switch"></div>
  6. <div id="tab-5" class="switch"></div>
  7. <ul class="tabBtn">
  8. <li><a href="#tab-1">タブ1</a></li>
  9. <li><a href="#tab-2">タブ2</a></li>
  10. <li><a href="#tab-3">タブ3</a></li>
  11. <li><a href="#tab-4">タブ4</a></li>
  12. <li><a href="#tab-5">タブ5</a></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. .tabBtn li a {
  3. display: block;
  4. cursor: pointer;
  5. padding: 10px 0;
  6. color: #fff;
  7. text-decoration: none;
  8. transition: background-color .3s;
  9. }
  10. .tabBtn li a:hover {
  11. background-color: rgba(205,92,92,.5);
  12. }
  13. /* :::::: mechanism :::::: */
  14. .tabContents section {
  15. opacity: 0.1;
  16. text-align: center;
  17. transition: opacity 0.3s;
  18. }
  19. #tab-1:target ~ .tabBtn li [href="#tab-1"],
  20. #tab-2:target ~ .tabBtn li [href="#tab-2"],
  21. #tab-3:target ~ .tabBtn li [href="#tab-3"],
  22. #tab-4:target ~ .tabBtn li [href="#tab-4"],
  23. #tab-5:target ~ .tabBtn li [href="#tab-5"] {
  24. background-color: #cd5c5c;
  25. }
  26. #tab-1:target ~ .tabContents section:nth-child(1),
  27. #tab-2:target ~ .tabContents section:nth-child(2),
  28. #tab-3:target ~ .tabContents section:nth-child(3),
  29. #tab-4:target ~ .tabContents section:nth-child(4),
  30. #tab-5:target ~ .tabContents section:nth-child(5) {
  31. opacity: 1;
  32. background-color: #fff;
  33. }
タブコンテンツ1
タブコンテンツ2
タブコンテンツ3
タブコンテンツ4
タブコンテンツ5