목록
다음
서

간단한 탭 제이쿼리

서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2015-12-16 (수) 09:47:37 · 2714

html

 

<ul class="tab">

    <li class="on">

        <a href="#">TAB 1</a>

        <div>

            Contents 1

        </div>

    </li>

    <li>

        <a href="#">TAB 2</a>

        <div>

            Contents 2

        </div>

    </li>

    <li>

        <a href="#">TAB 3</a>

        <div>

            Contents 3

        </div>

    </li>

</ul>

 

 

 

css

 

.tab {position:relative; padding-top:31px;}

.tab>li>a {

    display:block; 

    position:absolute; 

    top:0; 

    width:95px;

    height:30px;

    line-height:30px;

    text-align:center; 

    background:#eee; 

    color:#555; 

    border:1px solid #767676; 

    border-bottom:0;

}

.tab>li.on>a {background:#767676; color:#fff;}

.tab>li:first-child>a {left:0;}

.tab>li+li>a {left:100px;}

.tab>li+li+li>a {left:200px;}

.tab>li>div {height:0; overflow:hidden; position:absolute;}

.tab>li.on>div {height:auto; position:static; border:1px solid #767676; padding:10px;}

 

 

Jquery

 

$( ".tab>li>a" ).click(function() {

    $(this).parent().addClass("on").siblings().removeClass("on");

    return false;

});

#개발자팁 #개발자 #팁자료실 #jquery
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
16-06-11 조회 2,976
16-05-12 조회 2,975
16-04-12 조회 3,139
16-02-03 조회 2,913
16-02-03 조회 2,969
16-02-02 조회 3,213
16-02-01 조회 2,637
16-02-01 조회 2,621
16-01-31 조회 2,656
16-01-31 조회 2,663
16-01-31 조회 2,670
16-01-30 조회 2,663
16-01-29 조회 2,651
16-01-29 조회 2,544
16-01-29 조회 2,536
16-01-28 조회 2,484
16-01-28 조회 2,395
16-01-27 조회 2,537
16-01-27 조회 2,539
16-01-26 조회 2,505
16-01-25 조회 2,587
16-01-25 조회 2,463
16-01-24 조회 2,464
16-01-24 조회 2,467
16-01-24 조회 2,377
16-01-23 조회 2,431
16-01-23 조회 2,456
16-01-23 조회 2,423
16-01-22 조회 2,606
16-01-21 조회 2,673
16-01-21 조회 2,535
16-01-21 조회 2,516
16-01-20 조회 2,457
16-01-20 조회 2,410
16-01-20 조회 2,410
16-01-19 조회 2,465
16-01-19 조회 2,511
16-01-18 조회 2,494
16-01-16 조회 2,427
16-01-16 조회 2,358
16-01-16 조회 2,422
16-01-15 조회 2,583
16-01-15 조회 2,556
16-01-15 조회 2,508
16-01-15 조회 2,445
16-01-14 조회 2,480
16-01-14 조회 2,717
16-01-14 조회 2,527
16-01-13 조회 2,533
16-01-13 조회 2,476
16-01-13 조회 2,452
16-01-12 조회 2,600
16-01-11 조회 2,693
16-01-11 조회 2,586
16-01-11 조회 2,397
16-01-02 조회 2,838
15-12-31 조회 2,557
15-12-27 조회 2,647
15-12-27 조회 2,548
15-12-27 조회 2,608
15-12-26 조회 2,568
15-12-26 조회 2,638
15-12-26 조회 2,655
15-12-25 조회 3,344
15-12-25 조회 2,535
15-12-25 조회 2,535
15-12-25 조회 2,492
15-12-24 조회 3,029
15-12-23 조회 2,493
15-12-23 조회 2,623
15-12-23 조회 2,571
15-12-22 조회 2,613
15-12-22 조회 2,596
15-12-22 조회 2,500
15-12-21 조회 2,538
15-12-21 조회 2,572
15-12-21 조회 2,540
15-12-20 조회 2,587
15-12-20 조회 2,750
15-12-20 조회 2,528
15-12-19 조회 2,607
15-12-19 조회 2,599
15-12-19 조회 2,607
15-12-18 조회 2,909
15-12-18 조회 2,582
15-12-18 조회 2,569
15-12-18 조회 2,543
15-12-17 조회 2,534
15-12-17 조회 2,540
15-12-17 조회 2,508
15-12-16 조회 2,522
15-12-16 조회 2,558
15-12-16 조회 2,503
15-12-15 조회 2,511
15-12-15 조회 2,509
15-12-15 조회 2,503
15-12-14 조회 2,574
15-12-14 조회 2,657
15-12-14 조회 2,485
15-12-13 조회 2,450
글쓰기