728x90
반응형
방법1. 라디오버튼을 이용한다.
아래와같은 구조로, 라디오 버튼을 이용해 1개만 선택할수 있도록하고, 선택한 라디오버튼에 해당하는 내용을 보여준다.
<li id="tab1" class="btnCon">
<input type="radio" checked name="tabmenu" id="tabmenu1">
<label for="tabmenu1">menu1</label>
<div class="tabCon" ></div>
</li>
.tabmenu input:checked ~ label{
background:#ccc;
}
.tabmenu input:checked ~ .tabCon{
display:block;
}
탭안에 탭 넣기
방법2. 가상클래스 선택자 :target 을 이용한다.
[CSS] - [CSS] :target 가상클래스 선택자
<li id="tab1" class="btnCon">
<a class="btn first" href="#tab1">menu1</a>
<div class="tabCon" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</li>
#tab1로 싸여진 탭 메뉴와 해당 내용의 구조로 이루어져있고,
:target 가상클래스 선택자를 이용해서 탭메뉴를 구현한다.
.btnCon:target {
background : #ccc;
}
.btnCon:target .tabCon{
display: block;
}
필요한 스크립트는
location.href = "#tab1";
맨처음 아무것도 클릭이 안되어 있는 상태여서 활성화를 시켜주기위해 한줄을 추가해준다.
728x90
반응형
'CSS > CSS 응용' 카테고리의 다른 글
[CSS]버튼에 쓸수 있는 애니메이션 (391) | 2019.05.30 |
---|---|
[CSS]종이 끝이 살짝 떠있는듯한 효과 (377) | 2019.05.29 |
[CSS]touch-action 속성을 이용해 터치 제한하기 (786) | 2019.05.29 |
[CSS]3D 버튼 애니메이션 (1777) | 2019.05.29 |
[CSS]animation - 애니메이션 효과 중지했다가 다시 시작하기 (2506) | 2019.05.28 |
댓글