탭이 일반적으로 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의 장점은 강력하고 유연하다는 것입니다. 하지만 간단한 콘텐츠 전환만 필요한 경우는...
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
