이전
목록
다음
탈

도전해BoA요~ 1탄

지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-05-14 (월) 11:22:42 · 3096
다음은 두가지 탭메뉴를 구현한 것입니다.
1) nav, section 은 html5 요소로 이전 버전의 div 로 호환하여 생각하셔도 무방합니다.
2) 문서구조는 필요와 의미에 맞게 최적화되어 있습니다. (아마도...☞☜)
3) 기본동작은 일반적인 탭기능과 동일합니다. (마우스클릭이벤트)
4) 문서구조를 참조하여 jquery 를 최적화 해BoA~요. 혹은 잘못된 부분을 고쳐BoA~요.
 
 
텍스트탭
<nav class="lt_nav">
    <ul>
        <li class="lt_nav_1" title="tab1">자유게시판<span> <a href="#">+</a></span></li>
        <li>|</li>
        <li class="lt_nav_1" title="tab2">유머게시판<span> <a href="#">+</a></span></li>
    </ul>
</nav>
<section class="lt lt_nav_1s tab1">
    <h4><span>텍스트탭1</span></h4>
    <ul>
        <li>·</li>
        <li>title</li>
        <li class="date lt_date">date</li>
   </ul>
</section>
<section class="lt lt_nav_1s tab2">
    <h4><span>텍스트탭2</span></h4>
    <ul>
         <li>·</li>
         <li>title</li>
         <li class="date lt_date">date</li>
    </ul>
</section>
 
박스탭
<nav>
    <ul class="lt_1">
        <li title="tab3">탭3<span> <a href="#">더보기</a></span></li>
        <li title="tab4">탭4<span> <a href="#">더보기</a></span></li>
        <li title="tab5">탭5<span> <a href="#">더보기</a></span></li>
    </ul>
</nav>
<section class="lt tab3">
    <h4><span>탭3내용</span></h4>
    <ul>
        <li>·</li>
        <li>title</li>
        <li class="date lt_date">date</li>
    </ul>
</section>
<section class="lt tab4">
    <h4><span>탭4내용</span></h4>
    <ul>
        <li>·</li>
        <li>title</li>
        <li class="date lt_date">date</li>
    </ul>
</section>
<section class="lt tab5">
    <h4><span>탭5내용</span></h4>
    <ul>
        <li>·</li>
        <li>title</li>
        <li class="date lt_date">date</li>
    </ul>
</section>
 
스크립트 
<script>
$(document).ready(function(){
    var lt = $('.lt_nav li[class*="lt_nav_"]');//텍스트탭최신글
    lt.click(function(){
        var lt_title = $(this).attr('title');
        var lt_class = $(this).attr('class');
        var lt_class_sel = lt_class.split(' ');
        $('.'+lt_class_sel[0]+'s').css('display','none');
        $('.'+lt_title).css('display','block');
        $('.'+lt_class_sel).removeClass('c_red');
        $(this).addClass('c_red');
    });
    var lt_1 = $('.lt_1 li');//박스탭최신글
    var lt_1_sec = $('#i2 section');
    lt_1.click(function(){
        var lt_1_on = $(this).attr('title');
        lt_1.removeClass('on');
        $(this).addClass('on');
        $(lt_1_sec).css('display','none');
        $('.'+lt_1_on).css('display','block');
    });
});
</script>
#개발자팁 #개발자 #팁자료실 #jquery
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,093
12-08-07 조회 3,764
12-08-03 조회 3,585
12-07-31 조회 3,680
12-07-30 조회 3,629
12-07-16 조회 3,852
12-07-15 조회 3,642
12-07-07 조회 3,532
12-07-06 조회 3,741
12-07-03 조회 3,700
12-06-29 조회 3,295
12-06-22 조회 3,674
12-06-17 조회 3,922
12-05-21 조회 3,844
12-05-02 조회 3,405
12-05-02 조회 4,202
12-05-02 조회 3,310
12-04-30 조회 3,494
12-04-30 조회 3,190
12-03-17 조회 4,043
12-03-10 조회 3,388
12-03-08 조회 3,914
12-03-03 조회 3,606
12-02-27 조회 5,025
12-02-17 조회 4,335
12-02-16 조회 4,589
12-02-03 조회 3,295
12-01-31 조회 3,193
12-01-24 조회 3,173
12-01-17 조회 3,887
12-01-05 조회 3,435
11-12-30 조회 3,171
11-12-23 조회 4,726
11-12-08 조회 3,452
11-12-07 조회 4,441
11-11-27 조회 3,846
11-11-25 조회 4,189
11-11-23 조회 3,644
11-11-22 조회 3,500
11-11-09 조회 3,213
11-10-23 조회 3,139
11-10-19 조회 3,107
11-10-08 조회 2,797
11-10-04 조회 2,806
11-10-04 조회 5,248
11-09-01 조회 4,327
11-08-13 조회 2,502
11-08-06 조회 3,184
11-07-11 조회 3,580
11-06-27 조회 2,953
11-06-21 조회 2,628
11-06-13 조회 2,419
11-06-07 조회 2,422
11-05-26 조회 2,405
11-04-20 조회 2,718
11-03-21 조회 2,811
11-03-18 조회 2,510
11-03-11 조회 2,535
11-02-07 조회 2,360
11-01-18 조회 2,682
11-01-12 조회 2,401
11-01-06 조회 2,505
10-12-10 조회 2,763
10-12-09 조회 2,599
10-12-08 조회 5,034
10-11-29 조회 2,701
10-11-28 조회 2,786
10-11-28 조회 2,624
10-11-19 조회 2,811
10-11-04 조회 2,698
10-10-21 조회 2,418
10-10-19 조회 3,360
10-10-12 조회 2,690
10-10-07 조회 2,519
10-09-30 조회 3,478
10-09-17 조회 3,886
10-09-17 조회 3,836
10-05-31 조회 3,533
09-12-31 조회 3,661
09-07-23 조회 4,990
08-09-16 조회 3,206
08-09-06 조회 2,949
08-09-04 조회 3,361
08-08-16 조회 4,410
08-08-15 조회 3,278
08-08-14 조회 4,492
08-08-12 조회 3,966
08-07-23 조회 2,785
08-07-10 조회 3,732
08-07-04 조회 2,952
08-06-27 조회 7,597
08-06-19 조회 4,892
08-05-27 조회 5,506
08-05-25 조회 5,333
08-05-23 조회 3,408
08-05-23 조회 4,554
08-05-21 조회 4,927
08-05-20 조회 4,047
08-05-20 조회 3,284
08-04-18 조회 4,327
글쓰기