[css] CSS만으로 Tab전환시키는 방법 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

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

 

추천0

댓글목록

등록된 댓글이 없습니다.

Total 825건 1 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
825 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1531 0 11-02
824 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2113 0 07-10
823 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2248 0 08-04
822 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2499 0 10-02
821 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2560 0 06-09
820 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2643 0 08-04
819 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2665 0 10-17
818 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2672 0 12-31
817 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2679 0 12-04
816 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2696 0 08-03
815 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2810 0 04-16
814 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2878 0 03-26
813 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2934 0 12-24
812 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3016 0 03-10
811 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3024 0 06-03
810 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3089 0 02-21
809 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3100 0 07-08
808 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3106 0 04-06
807 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3117 0 07-08
806 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3166 0 03-03
805 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3201 0 03-29
804 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3277 0 02-27
803 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3373 0 10-31
802 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3490 0 02-26
801 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3519 0 02-27

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
5,777
어제
7,268
최대
8,233
전체
1,514,482
Copyright (c) 株式会社YHPLUS. All rights reserved.