먼저 렌더링을 살펴보겠습니다
CSS3 의사 클래스 대상
사용 target의 특성상 순수한 CSS 탭 효과 전환이 가능합니다
샘플 코드는 다음과 같습니다
코드는 다음과 같습니다
<style type="text/css"> .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:inline-block; } .tabmenu li a{ display:block; padding:5px 10px; margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:5px 5px 0 0; background-color:#e3f1f8; color:#333; text-decoration: none; font-size:16px; } .tablist{ position:relative; top:200px; margin:0 auto; width:600px; min-height:200px; } .tab_content{ position:absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:10px; box-shadow:0 2px 3px rgba(0,0,0,0,1); font-size:16px; line-height:16px; color:#666; background-color:#fff; } #tab1:target,#tab2:target,#tab3:target{ z-index:1; } </style> <p class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <p id="tab1" class="tab_content">tab1</p> <p id="tab2" class="tab_content">tab2</p> <p id="tab3" class="tab_content">tab3</p> </p>
가장 중요한 코드
코드는 다음과 같습니다.
#tab1:target,#tab2:target,#tab3:target{ z-index:1; }
의 특성에 따라 해당 p에 대한 첫 번째 앵커 링크 그런 다음 z-index 속성에 따라 p의 계층 관계를 변경하여 탭 전환 효과를 얻습니다!
대상 호환성
마지막으로 호환성 문제에 대해 언급하겠습니다. 이는 CSS3의 새로운 기능이므로 IE678과 같은 이전 버전의 브라우저와 호환되지 않습니다.
요약
위 내용은 모두의 공부나 업무에 조금이라도 도움이 되었으면 좋겠습니다. 소통하라는 메시지.
순수 CSS3를 사용한 탭 전환의 더 많은 예를 보려면 PHP 중국어 웹사이트를 주목하세요!