[css] CSS만으로 Tab전환시키는 방법
페이지 정보
본문
<style type="text/css">
/* 탭 전체 스타일 */
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 700px;
margin: 0 auto;}
/* 탭 스타일 */
.tab_item {
width: calc(100%/3);
height: 50px;
border-bottom: 3px solid #333333;
background-color: #f8f8f8;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #333333;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: tab01 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}
/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {
display: none;
}
/* 탭 컨텐츠 스타일 */
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}
/* 선택 된 탭 콘텐츠를 표시 */
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content {
display: block;
}
/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item {
background-color: #333333;
color: #fff;
}
</style>
<div class="tabs">
<input id="tab01" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab01">Tab 1</label>
<input id="tab02" type="radio" name="tab_item">
<label class="tab_item" for="tab02">Tab 2</label>
<input id="tab03" type="radio" name="tab_item">
<label class="tab_item" for="tab03">Tab 3</label>
<div class="tab_content" id="tab01_content">
tab01_content
</div>
<div class="tab_content" id="tab02_content">
tab02_content
</div>
<div class="tab_content" id="tab03_content">
tab03_content
</div>
</div>
댓글목록
등록된 댓글이 없습니다.
