[jQuery] 제이쿼리 간단탭 > 팁앤테크

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

팁앤테크

[jQuery] 제이쿼리 간단탭

페이지 정보

본문

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>tabs demo</title>
    <style>
        #tabs ul {margin:0; padding:0; list-style:none;}
        #tabs .tab01 {position:relative; padding-top:31px;}
        #tabs .tab01>li>a {
            display:block;
            position:absolute;
            top:0;
            width:95px;
            height:30px;
            line-height:30px;
            text-align:center;
            background:#0099CC;
            color:#fff;
            border:1px solid #0099CC;
            border-bottom:0;
        }
        #tabs .tab01>li.on>a {background:#f0f0f0;border:1px solid #f0f0f0; color:#333;}
        #tabs .tab01>li:first-child>a {left:0;}
        #tabs .tab01>li+li>a {left:100px;}
        #tabs .tab01>li+li+li>a {left:200px;}
        #tabs .tab01>li>div {height:0; overflow:hidden; position:absolute;}
        #tabs .tab01>li.on>div {height:auto; position:static; border:1px solid #f0f0f0; background:#f0f0f0;padding:10px;}
    </style>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>

<div id="tabs">
<ul class="tab01">
    <li class="on">
        <a href="#">탭메뉴 1</a>
        <div>
            내용 1
        </div>
    </li>
    <li>
        <a href="#">탭메뉴 2</a>
        <div>
            내용 2
        </div>
    </li>
    <li>
        <a href="#">탭메뉴 3</a>
        <div>
            내용 3
        </div>
    </li>
</ul>
</div>

<script>
$( "#tabs .tab01>li>a" ).click(function() {
    $(this).parent().addClass("on").siblings().removeClass("on");
    return false;
});
</script>
</body>
</html>
추천0

댓글목록

등록된 댓글이 없습니다.

Total 825건 3 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
775 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13835 0 01-03
774 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13644 0 01-12
773 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14606 0 01-14
772 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14151 0 01-17
771 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13250 0 01-18
770 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14404 0 01-21
769 이암쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13855 0 01-23
768 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13496 1 01-27
767 포인트쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 15011 0 02-04
766 쎄엠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 16229 0 02-08
765 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16101 0 02-08
764 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12358 0 02-09
763 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15568 0 02-16
762 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13498 0 02-16
761 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14821 0 02-16
760 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17749 0 02-22
759 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13123 1 02-27
758 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12077 0 02-27
757 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14168 0 02-27
756 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13604 0 02-29
755 쎄엠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 13967 0 02-29
754 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15745 0 03-04
753 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13291 0 03-04
752 쎄엠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 15814 0 03-06
751 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15423 0 03-21

검색

회원로그인

회원가입

사이트 정보

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

접속자집계

오늘
2,406
어제
7,952
최대
8,233
전체
1,526,483
Copyright (c) 株式会社YHPLUS. All rights reserved.