메뉴 건너뛰기

프로그램언어

Home 프로그램언어 JAVA jquery
✔ 뷰어로 보기
2019.01.10 13:44

jQuery 로 탭메뉴 보였다 안보였다 맹글기

조쉬
조회 수 1329 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

탭을 클릭할때 탭메뉴 이미지가 on, off 되고 해당되는 서브메뉴 div 가 보였다 안보였다 하는 샘플을 맹글어 보았다.


주석을 싹 달아놨으니 응용하는데 큰 문제는 없을것이다.


※ 롤오버 이미지 이름은 프로그램 편의상 xxxxxx.png, xxxxxx_on.png 요렇게 해야 쪽바로 작동한다.


※ png 파일이 아니라 gif 나 뭐 다른 확장자면 소스중에 .toggle() 요부분에다 옵션으로 지정할 수는 있다. 고건 주석으로 설명되 있음.




html

<div id="wrap">
    <div id="tabMenu">
        <ul>
            <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
            <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
            <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
            <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
            <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
            <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
            <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
        </ul>
    </div>
    <div id="tabSubMenu">
        <div>서브1<div>룰루랄라~</div></div>
        <div>서브2</div>
        <div>서브3</div>
        <div>서브4</div>
        <div>서브5</div>
        <div>서브6</div>
        <div>서브7</div>
    </div>
</div>


javascript


var tabMenu = $("#tabMenu ul>li>a");
var tabSubMenu = $("#tabSubMenu>div");
 
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
 
// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
    // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
    var idx = tabMenu.index($(this));
 
    // 모든 서브메뉴 안보이게
    tabSubMenu.hide();
    // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
    tabSubMenu.eq(idx).show();
 
    // 현재 on 이미지를 off 이미지로 변경
    tabMenu.find("img.on").removeClass("on").toggle();
    // 클릭한 탭 이미지만 on 이미지로 변경
    $(this).find("img").addClass("on").toggle({to:"on"});
});
 
 
 
/**
    이미지 토클 훌러그인
    $("img").toggle();              // on이면 off로, off면 on 이미지로
    $("img").toggle({to:"on"});     // 무조건 on 이미지로
    // on, off 이미지 패턴설정
    $("img").toggle({to:"on", on:"_on.gif", ".gif"});
*/
$.fn.toggle = function(opt){
    var base = {
        to : null,
        on : "_on.png",
        off : ".png"
    };
 
    $.extend(base, opt);
 
    this.each(function(){
        var el = $(this);
         
        if(!el.is("img")) return;
         
        var src = conv = el.attr("src");
         
        // to 옵션이 있을때
        if( base.to ){
            if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
            else if( base.to=="off" ) conv = src.replace(base.on,base.off);
        }
        // to 옵션이 없으면 토글 처리
        else{
            conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
        }
         
        el.attr("src", conv);
        el.data("orgimg", conv);
    });
     
    return this;
};
 
 
// 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
tabMenu.eq(0).click();


전체소스


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
 
<body>
<div id="wrap">
    <div id="tabMenu">
        <ul>
            <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
            <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
            <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
            <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
            <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
            <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
            <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
        </ul>
    </div>
    <div id="tabSubMenu">
        <div>서브1<div>룰루랄라~</div></div>
        <div>서브2</div>
        <div>서브3</div>
        <div>서브4</div>
        <div>서브5</div>
        <div>서브6</div>
        <div>서브7</div>
    </div>
</div>
 
<script>
    var tabMenu = $("#tabMenu ul>li>a");
    var tabSubMenu = $("#tabSubMenu>div");
     
    // 모든 서브메뉴 안보이게
    tabSubMenu.hide();
 
    // 탭메뉴 a 를 클릭했을때
    tabMenu.on("click", function(e){
        // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
        var idx = tabMenu.index($(this));
 
        // 모든 서브메뉴 안보이게
        tabSubMenu.hide();
        // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
        tabSubMenu.eq(idx).show();
 
        // 현재 on 이미지를 off 이미지로 변경
        tabMenu.find("img.on").removeClass("on").toggle();
        // 클릭한 탭 이미지만 on 이미지로 변경
        $(this).find("img").addClass("on").toggle({to:"on"});
    });
 
 
 
    /**
        이미지 토클 훌러그인
        $("img").toggle();              // on이면 off로, off면 on 이미지로
        $("img").toggle({to:"on"});     // 무조건 on 이미지로
        // on, off 이미지 패턴설정
        $("img").toggle({to:"on", on:"_on.gif", ".gif"});
    */
    $.fn.toggle = function(opt){
        var base = {
            to : null,
            on : "_on.png",
            off : ".png"
        };
 
        $.extend(base, opt);
 
        this.each(function(){
            var el = $(this);
             
            if(!el.is("img")) return;
             
            var src = conv = el.attr("src");
             
            // to 옵션이 있을때
            if( base.to ){
                if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
                else if( base.to=="off" ) conv = src.replace(base.on,base.off);
            }
            // to 옵션이 없으면 토글 처리
            else{
                conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
            }
             
            el.attr("src", conv);
            el.data("orgimg", conv);
        });
         
        return this;
    };
 
 
    // 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
    tabMenu.eq(0).click();
</script>
 
</body>
</html>


※ 마우스 오버될때도 적용할려면~~?

// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
    // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
    var idx = tabMenu.index($(this));
 
    // 모든 서브메뉴 안보이게
    tabSubMenu.hide();
    // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
    tabSubMenu.eq(idx).show();
 
    // 현재 on 이미지를 off 이미지로 변경
    tabMenu.find("img.on").removeClass("on").toggle();
    // 클릭한 탭 이미지만 on 이미지로 변경
    $(this).find("img").addClass("on").toggle({to:"on"});
}).on("mouseover", function(){
    // 마우스 오버됬을때 클릭한것처럼 동작
    $(this).click();
});



Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄
에디터 선택하기
?
  1. No Image 10Jan
    by
    2019/01/10 Views 1211 

    jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

  2. No Image 25Mar
    by
    2021/03/25 Views 228 

    jQuery로 접속 주소(URL) 알아내기

  3. No Image 17Nov
    by
    2016/11/17 Views 6951 

    jQuery, JavaScript 새로고침(reload)

  4. No Image 22Dec
    by
    2016/12/22 Views 49613 

    jquery 플러그인 링크 모음

  5. No Image 06Sep
    by
    2018/09/06 Views 2098 

    jQuery 폼 입력값 체크 예제

  6. No Image 05Mar
    by
    2019/03/05 Views 2871 

    jquery 팝업 차단 없이 띄우기

  7. 17Nov
    by
    2016/11/17 Views 8042 

    jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox)

  8. No Image 04Jul
    by
    2018/07/04 Views 4666 

    jquery 체크박스 배열 처리. 변수 하나에 담기.

  9. No Image 27Aug
    by
    2019/08/27 Views 1737 

    jquery 자식창에서 부모창으로 값 전달

  10. No Image 02Mar
    by
    2017/03/02 Views 11799 

    jQuery 입문: form 데이터 유효성 검사

  11. No Image 04Jun
    by
    2019/06/04 Views 853 

    jQuery 일반적 팁

  12. No Image 02Mar
    by
    2017/03/02 Views 10559 

    jquery 이용한 필수입력체크(input form)

  13. No Image 11Sep
    by
    2016/09/11 Views 7360 

    jquery 이용한 이미지 변환

  14. No Image 04Jul
    by
    2018/07/04 Views 3363 

    jQuery 유효성 검사

  15. No Image 21Sep
    by
    2016/09/21 Views 6679 

    jQuery 예약어 $ 를 사용하지 못하는 경우 해결책 noConflict()

  16. No Image 02Mar
    by
    2017/03/02 Views 6770 

    jQuery 실행패턴

  17. No Image 25Mar
    by
    2021/03/25 Views 211 

    jquery 사용자정의 속성의 사용

  18. No Image 25Mar
    by
    2021/03/25 Views 158 

    jQuery 사용자 정의 속성이 잘 반영되지 않은 경우

  19. No Image 10Jan
    by
    2019/01/10 Views 1085 

    jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

  20. No Image 10Jan
    by 조쉬
    2019/01/10 Views 1329 

    jQuery 로 탭메뉴 보였다 안보였다 맹글기

쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© 2016 JOSHI. All Rights Reserved
© k2s0o1d4e0s2i1g5n. All Rights Reserved