브라우저 제목
  • 디지털(반응형)11월19일
  • 빛그림
  • Jan 22, 2019
  • 43

탭 예제 보기

 

html

<div class="tabs-wrap">
                <ul class="tabs">
                    <li class="tab-list"><a href="#cont1" >탭1</a></li>
                    <li class="tab-list"><a href="#cont2">탭2</a></li>
                    <li class="tab-list"><a href="#cont3">탭3</a></li>
                    <li class="tab-list"><a href="#cont4">탭4</a></li>
                </ul>
                <div class="tab-content c1" id="cont1">
                    <h3>탭콘텐츠1</h3>
                    <div>
                        <p>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        </p>
                    </div>
                </div>
                <div class="tab-content c2" id="cont2">
                    <h3>탭콘텐츠2</h3>
                    <div>
                        <p>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        </p>
                    </div>
                </div>
                <div class="tab-content c3" id="cont3">
                    <h3>탭콘텐츠3</h3>
                    <div>
                        <p>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        </p>
                    </div>
                </div>
                <div class="tab-content c4" id="cont4">
                    <h3>탭콘텐츠4</h3>
                    <div>
                        <p>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        탭콘텐츠 탭콘텐츠 텝콘텐츠<br>
                        </p>
                    </div>
                </div>
            </div>

 

css

.tabs-wrap{
    width:80%;
    max-width:800px;
    height:300px;
    margin:auto;
    border:none;
    position:relative;
    top:100px;
    
}
.tabs{
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
}
.tabs>li{
    width:22%;
    height:50px;
    background:transparent;
    float:left;
    margin-left:2.4%;
    text-align:center;
    display:table;
    margin-top:10px;
}

.tabs>li>a{
    display:table-cell;
    vertical-align:middle;
    font-size:1.5em;
    color:white;
    text-decoration:none;
    background:transparent;
    border:1px solid white;
    box-sizing:border-box;
}
.tabs>li>a.active,
.tabs>li>a:hover,
.tabs>li>a:focus{
    background:rgba(0,0,0,0.5);
    color:white;
    border-bottom:none;
}

.tabs>li:first-child{
    background:url(../images/back1.jpg);
}
.tabs>li:nth-child(2){
    background:url(../images/back2.jpg);
}
.tabs>li:nth-child(3){
    background:url(../images/back3.jpg);
}
.tabs>li:last-child{
    background:url(../images/back4.jpg);
}
.tabs>li.tab-list{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.tab-content{
    width:100%;
    height:230px;
    border:none;
    box-sizing:border-box;
    clear:both;
    float:left;
    margin-top:10px;    
}
.tab-content>h3{
    width:100px;
    background:OliveDrab;
    margin:auto;
    margin-top:10px;
    padding:10px;
    text-align:center;
}
.tab-content>div{
    display:table;
    width:100%;
    height:150px;
    background:yellow;
    margin-top:10px;
    color:white;
    font-weight:bold;
}
.c1>div{
    background:url(../images/back1.jpg);
}
.c2>div{
    background:url(../images/back2.jpg);
}
.c3>div{
    background:url(../images/back3.jpg);
}
.c4>div{
    background:url(../images/back4.jpg);
}
.tab-content>div{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.tab-content>div>p{
    display:table-cell;
    vertical-align:middle;
    padding-left:50px;
    box-sizing:border-box;
}

 

js

$(".tab-content").hide();
    $(".tabs a").click(function(){
        $(".tab-content:visible").hide();
        $(this.hash).show();
        $(".tabs a.active").removeClass("active");
        $(this).addClass("active");
        return false;
        
    }).filter(':first').click();

제목 날짜
html css정리는 http://comlearn.co.kr/html_css 게시판에 내용 업로드 됩니다. 2019.02.13
57일차 - 데스크탑, 모바일 구분 접속 2019.02.11
55~56일차 24시 팝업 2019.02.09
54일차 - Dates 2019.02.07
53일차 select family 사이트 2019.02.04
52일차 form작성 방법 2019.01.27
51일차 모바일에서 nav처리방법 media query 작성, footer처리 방법, 높이 자동조절 file 2019.01.27
50일차 드롭다운 메뉴 file 2019.01.27
49일차 팝업, 3초에 닫히는 팝업 2019.01.26
48일차 webfont적용 2019.01.25
46일차 탭 2019.01.22
45일차 swiper에서 애니메이션 2019.01.22
44일차 일반 휠이벤트 정리 2019.01.21
43일차 attr매서드 스트링 slice() 2019.01.17
42일차 휠 애니메이션 2019.01.16
40일~41일차 2019.01.16
38-39일차 애니메이션 2019.01.15
38-39일차 애니메이션 2019.01.15
37일차 특정위치에서 애니메이션 2019.01.11
48일차 네비 스크롤 애니메이션 file 2019.01.09
태그 목록