이전
목록
다음
탈

도전해BoA요~ 1탄

지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-05-14 (월) 11:22:42 · 3147
다음은 두가지 탭메뉴를 구현한 것입니다.
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-04-26 조회 3,847
12-04-24 조회 3,236
12-04-23 조회 4,572
12-04-22 조회 3,260
12-04-19 조회 3,348
12-04-18 조회 4,408
12-04-18 조회 3,110
12-04-17 조회 3,382
12-04-17 조회 5,142
12-04-16 조회 3,561
12-04-13 조회 3,108
12-04-09 조회 3,170
12-04-04 조회 3,944
12-04-01 조회 3,219
12-03-31 조회 3,621
12-03-30 조회 3,227
12-03-30 조회 3,889
12-03-26 조회 3,503
12-03-26 조회 3,082
12-03-22 조회 3,231
12-03-21 조회 3,081
12-03-19 조회 3,498
12-03-17 조회 3,519
12-03-14 조회 3,251
12-03-10 조회 3,929
12-03-09 조회 3,520
12-03-09 조회 3,339
12-03-08 조회 3,817
12-03-08 조회 3,985
12-03-08 조회 4,074
12-03-03 조회 3,334
12-03-02 조회 4,658
12-02-28 조회 3,188
12-02-27 조회 3,008
12-02-25 조회 3,150
12-02-24 조회 3,858
12-02-23 조회 3,125
12-02-22 조회 3,640
12-02-22 조회 5,406
12-02-22 조회 3,983
12-02-22 조회 4,299
12-02-18 조회 3,798
12-02-17 조회 3,017
12-02-17 조회 3,425
12-02-14 조회 3,495
12-02-13 조회 3,378
12-02-10 조회 1만
12-02-08 조회 3,037
12-02-07 조회 3,377
12-02-06 조회 3,103
12-02-05 조회 3,569
12-01-31 조회 3,491
12-01-30 조회 9,676
12-01-29 조회 3,838
12-01-26 조회 3,434
12-01-25 조회 4,049
12-01-24 조회 3,438
12-01-10 조회 3,750
12-01-10 조회 4,510
12-01-09 조회 3,285
12-01-08 조회 7,147
12-01-08 조회 3,668
12-01-07 조회 5,196
12-01-04 조회 3,899
12-01-02 조회 3,127
12-01-02 조회 3,181
12-01-02 조회 3,481
12-01-01 조회 3,118
11-12-31 조회 3,427
11-12-31 조회 3,111
11-12-30 조회 3,275
11-12-30 조회 3,429
11-12-29 조회 3,643
11-12-28 조회 3,730
11-12-26 조회 3,306
11-12-23 조회 3,525
11-12-22 조회 3,062
11-12-15 조회 4,161
11-12-08 조회 3,971
11-12-05 조회 3,310
11-12-04 조회 5,725
11-12-03 조회 3,600
11-12-02 조회 3,373
11-12-01 조회 5,442
11-11-30 조회 2,923
11-11-30 조회 2,827
11-11-28 조회 3,170
11-11-26 조회 3,358
11-11-25 조회 3,369
11-11-24 조회 2,964
11-11-22 조회 3,061
11-11-22 조회 2,902
11-11-17 조회 2,837
11-11-11 조회 2,831
11-11-09 조회 2,887
11-11-08 조회 3,265
11-11-08 조회 2,559
11-11-04 조회 3,642
11-11-01 조회 2,948
11-10-26 조회 2,535
글쓰기