메뉴 건너뛰기

2019.01.10 13:41

jQuery 로 탭메뉴

조회 수 974 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

html

※ 버튼의 롤오버 이미지 파일명은 ***_on.* ***_off.* 요렇게 해야 클릭했을때 이미지가 바뀐다.

<div class="tabmenu">
    <h2>첫번째 탭메뉴</h2>  
 
    <ul>
        <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
            <ul class="tabcontent">
                <li><a href="#">1 제목이 나오는부분.....</a></li>
                <li><a href="#">2 제목이 나오는부분.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
            <ul class="tabcontent">
                <li><a href="#">무우우우우우우우.....</a></li>
                <li><a href="#">5무우우우우우우우ㄴ.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
            <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
            <ul class="tabcontent">   
                <li><a href="#">요농이 요느마</a></li>
                <li><a href="#">요농이 요느마</a></li>
            </ul>       
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
            <ul class="tabcontent">
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
    </ul>
</div>


css

<style>
    .tabmenu {position:relative; width:400px; height:200px;
             font-family:dotum,"",verdana;line-height:17px;font-size:12px;color:#555;}
    .tabmenu img {border:none;vertical-align:top;}
    .tabmenu ul {margin:0px;padding:0px;list-style:none;margin-top: 15px;}
    .tabmenu ul li {float:left}
    .tabmenu .tabcontent {display:none; width:240px;height:125px;position:absolute; left:0px;top:60px }
    .tabmenu .morebtn {position:absolute;right:0;top:30px;}
</style>


javascript (설명은 주석으로 대체함)

<script>
    $(document).ready(function(){
        $(".tabmenu").each(function(){
            var tab = $(this).children("ul");
            var tabBtn = tab.children("li").children("a");
            var content = tabBtn.nextAll();
             
            // 탭버튼을 클릭했을때
            tabBtn.click(function(){
                // 이미 on 상태면 pass
                if( $(this).hasClass("on") ) return;
 
                // 모든 컨텐츠 부분을 안보이게 한뒤
                content.hide();
 
                // 클릭한 tab 버튼(a태그) 옆의 모든 태그들은 보이도록
                $(this).nextAll().show();
                 
                // 모든탭 버튼에 있던 on 클래스를 빼고
                // 현재 클릭한 탭메뉴 버튼에 on 클래스 추가
                tabBtn.removeClass("on");
                $(this).addClass("on");
                 
                // 탭버튼를 쭉 돌면서 on 클래스가 있는 버튼만 on 이미지로 바꾸고
                // 나머지 버튼들은 off 이미지로 바꾼다.
                tabBtn.each(function(){
                    var src;
                    var img = $(this).children("img");
                    if( $(this).hasClass("on") ){
                        src = img.attr("src").replace("_off.", "_on.");
                    }else{
                        src = img.attr("src").replace("_on.", "_off.");
                    }
                     
                    img.attr("src", src);
                });
            });
             
            // 맨첫번째 탭버튼 클릭처리
            tabBtn.eq(0).click();
        });
    });
</script>


※ 요렇게 tabmenu 클래스만 지정해서 똑같은 html 구조면 동시에 여러게 탭메뉴를 맹글수 있다.

<div class="tabmenu">
    <h2>첫번째 탭메뉴</h2>  
 
    <ul>
        <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
            <ul class="tabcontent">
                <li><a href="#">1제목이 나오는부분.....</a></li>
                <li><a href="#">2제목이 나오는부분.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
            <ul class="tabcontent">
                <li><a href="#">무우우우우우우우.....</a></li>
                <li><a href="#">5무우우우우우우우ㄴ.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
            <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
            <ul class="tabcontent">   
                <li><a href="#">요농이 요느마</a></li>
                <li><a href="#">요농이 요느마</a></li>
            </ul>       
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
            <ul class="tabcontent">
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
    </ul>
</div>
 
<div class="tabmenu">
    <h2>두번째 탭메뉴</h2>   
    <ul>
        <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
            <ul class="tabcontent">
                <li><a href="#">제목이 나오는부분.....</a></li>
                <li><a href="#">제목이 나오는부분.....</a></li>
            </ul>
        </li>
        <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
            <ul class="tabcontent">
                <li><a href="#">무우우우우우우우.....</a></li>
                <li><a href="#">무우우우우우우우ㄴ.....</a></li>
            </ul>
        </li>
            <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
            <ul class="tabcontent">   
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
        </li>
        <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
            <ul class="tabcontent">
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
        </li>
    </ul>
</div>





List of Articles
번호 제목 날짜 조회 수
99 jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 2019.01.10 1259
98 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2019.01.10 1188
97 jQuery 로 원하는 갯수만큼 checkbox 선택하기 2019.01.10 1086
96 jQuery 로 탭메뉴 보였다 안보였다 맹글기 2019.01.10 1380
» jQuery 로 탭메뉴 2019.01.10 974
94 스크롤 최하단 자동 포커스(auto scroll to bottom of page with jquery) 2018.11.07 1631
93 jquery timer, javascript countdown (타이머 예제) 2018.11.07 81882
92 Hide pager if bxslider has only 1 slide 2018.11.07 1358
91 Magnific popup conflict with "jquery.nicescroll" file 2018.11.07 1382
90 터치 디바이스 분기처리 2018.11.07 1350
89 중복 없는 랜덤 2018.11.07 2065
88 3D Perspective Carousel with jQuery and CSS3 - CSSSlider 2018.11.07 1515
87 iframe height auto resize 2018.11.07 1501
86 getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드 2018.11.07 1341
85 비활성화 된 라디오버튼 클릭 시 경고창 생성 2018.11.07 1453
84 특정영역 제외하고 body 클릭 2018.09.28 3667
83 따욤표 중복으로 출력하기 2018.09.28 1942
82 [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2018.09.27 2594
81 [jQuery] split, join 으로 공백제거 하기 2018.09.06 2221
80 [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기 2018.09.06 1890
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved