[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>