CSS 탭 팁_PHP 튜토리얼

탭이 일반적으로 Javascript로 구현된다는 것은 프로그래머라면 누구나 알고 있는 사실입니다. Javascript의 장점은 강력하고 유연하다는 것입니다. 하지만 간단한 콘텐츠 전환만 필요한 경우에는 CSS를 사용하여 Tab을 구현할 수 있습니다. 그렇다면 CSS를 사용하여 Tab을 구현하는 방법은 무엇입니까? 편집자와 함께 CSS를 배워 탭 기술을 구현해 봅시다!
1. 기준점:대상;
2. 순수한 앵커 포인트;
이 두 가지 각각에는 고유한 장점과 한계가 있습니다.
구체적인 데모를 보려면 여기를 확인하세요
옵션 1: 앵커:대상
CSS3에서는 사용자가 페이지와 상호 작용할 때 트리거되는 새로운 의사 클래스인 target을 도입합니다. 예를 들어, 다음 코드를 사용하면 사용자가 링크를 클릭할 때 p 요소의 :target 의사 클래스가 됩니다. 트리거되었습니다.
도착지로 링크>

새 문단입니다.

　
첫 번째 해결 방법은 :target 의사 클래스를 사용하여 탭 전환을 구현하는 것입니다. 구현 원칙은 페이지가 로드될 때 Tab에 해당하는 콘텐츠가 CSS를 통해 숨겨지고 Tab 콘텐츠가 :target 의사 클래스에 표시되도록 설정되는 것입니다.
HTML 구조는 다음과 같습니다.

 

   

Tab A

   

    Content A
   

   

Tab B

   

    Content B
   

   

Tab C

   

    Content C
   

   

Tab D

   

    Content D
   

使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容。
关键的CSS代码如下

dd{
    padding: 5px;
    /*隐藏Tab的内容*/
    display:none;
    -moz-border-radius: 5px;
    margin-top:20px
}
 
dd:target{
    position: absolute;
    /*显示Tab的内容*/
    display:block;
}
/*给Tab以及相应的内容设置相同的背景色*/
.tab-a,.content-a{
    background: #CCFF00;
}
.tab-b,.content-b{
    background: #CCFFFF;
}
.tab-c,.content-c{
    background: #FFFF00;
}
.tab-d,.content-d{
    background: #FFCCFF;
}

탭 A

내용A

탭 B

내용B

탭 C

내용C

탭 D

컨텐츠D

이 구조를 사용하면 CSS 없이도 내용을 명확하게 읽을 수 있다는 이점이 있습니다. 핵심 CSS 코드는 다음과 같습니다 dd{ 패딩: 5px; /*탭 내용 숨기기*/ 표시:없음; -moz-국경-반경: 5px; 여백 상단:20px } dd:대상{ 위치: 절대; /*탭의 내용 표시*/ 디스플레이:차단; } /*탭과 해당 콘텐츠의 배경색을 동일하게 설정*/ .tab-a,.content-a{ 배경: #CCFF00; } .tab-b,.content-b{ 배경: #CCFFFF; } .tab-c,.content-c{ 배경: #FFFF00; } .tab-d,.content-d{ 배경: #FFCCFF; }
CSS 솔루션을 사용할 때의 한 가지 단점은 현재 어떤 탭이 선택되어 있는지 구별하기 어렵다는 것입니다. 간단한 방법은 해당 탭과 탭 내용에 동일한 배경색을 설정하여 탭 내용이 표시될 때 현재 탭이 표시되도록 하는 것입니다. 탭을 더욱 명확하게 식별할 수 있습니다. 또한 CSS3의 선택기를 사용하기 때문에 현재는 Firefox, Safari, IE8과 같은 최신 브라우저에서만 사용할 수 있습니다.
옵션 2: 순수 앵커
옵션 2의 원리는 매우 간단합니다. 대부분의 브라우저에서 앵커 링크를 클릭하면 앵커에 해당하는 콘텐츠가 자동으로 가시 범위 내로 이동합니다. 이 원칙에 따르면 Tab의 모든 콘텐츠를 고정 높이 컨테이너에 넣고 컨테이너의 오버플로를 숨김으로 설정합니다. 또한 각 Tab 콘텐츠의 높이가 컨테이너와 일치해야 합니다. 이 구조에서는 앵커 링크를 클릭하면 해당 콘텐츠가 가시 범위, 즉 컨테이너 내의 콘텐츠로 자동으로 이동합니다.
구체적인 HTML 구조는 다음과 같습니다.

• 탭 A


• 탭 B


• 탭 C


• 탭 D






내용A




내용B




내용C




컨텐츠D



해결 방법 1과 원리가 다르기 때문에 여기서의 HTML 구조는 탭과 콘텐츠가 분리된 구조만 사용할 수 있습니다. 이 구조를 사용할 때의 한 가지 문제는 CSS가 없으면 콘텐츠를 명확하게 읽을 수 없다는 것입니다.
주요 CSS 코드는 다음과 같습니다.
/*탭 콘텐츠 컨테이너의 높이 설정*/
#tab_content{
높이: 190px;
오버플로: 숨김;
}
/*컨테이너와 일치해야 하는 각 탭 콘텐츠의 높이를 설정합니다*/
#tab_content .content{      
패딩: 5px;
-moz-국경-반경: 5px;
높이: 190px;
오버플로: 숨김;
}
해결 방법 1과 마찬가지로 여기서도 탭과 해당 콘텐츠에 동일한 배경색을 설정하여 선택 인식 문제를 해결합니다.
요약:
1. 순수 CSS로 구현된 탭에는 많은 제한 사항이 있습니다. 예를 들어 두 번째 옵션에서는 각 탭 콘텐츠의 높이를 동일하게 설정해야 합니다.
2. 현재 선택된 탭은 동일한 배경색을 설정하여 효과적으로 구분할 수 없는 경우가 많으며, 이는 적용되지 않는 경우가 많습니다.
3. 두 솔루션 모두 호환성 문제가 있습니다. 첫 번째 솔루션은 CSS3 선택기를 사용하며 CSS 구현으로 인해 제한되지만 두 번째 솔루션은 Opera에서 작동하지 않습니다.
4. 옵션 1에서 :target(또는 유사한 상호 작용 발생)을 트리거하는 다른 앵커를 클릭하면 탭 콘텐츠가 숨겨집니다.
http://www.bkjia.com/PHPjc/371856.htmlwww.bkjia.com참http: //www.bkjia.com/PHPjc/371856.htmlTechArticle프로그래머들은 탭이 일반적으로 Javascript로 구현된다는 것을 모두 알고 있습니다. javascript의 장점은 강력하고 유연하다는 것입니다. 하지만 간단한 콘텐츠 전환만 필요한 경우는...
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.