메뉴 건너뛰기

프로그램언어

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 10Jan
    by
    2019/01/10 Views 1085 

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

  3. No Image 10Jan
    by
    2019/01/10 Views 1022 

    jQuery 로 원하는 갯수만큼 checkbox 선택하기

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

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

  5. No Image 10Jan
    by
    2019/01/10 Views 938 

    jQuery 로 탭메뉴

  6. No Image 07Nov
    by
    2018/11/07 Views 1571 

    스크롤 최하단 자동 포커스(auto scroll to bottom of page with jquery)

  7. No Image 07Nov
    by
    2018/11/07 Views 81448 

    jquery timer, javascript countdown (타이머 예제)

  8. No Image 07Nov
    by
    2018/11/07 Views 1296 

    Hide pager if bxslider has only 1 slide

  9. 07Nov
    by
    2018/11/07 Views 1315 

    Magnific popup conflict with "jquery.nicescroll"

  10. No Image 07Nov
    by
    2018/11/07 Views 1278 

    터치 디바이스 분기처리

  11. No Image 07Nov
    by
    2018/11/07 Views 2017 

    중복 없는 랜덤

  12. No Image 07Nov
    by
    2018/11/07 Views 1388 

    3D Perspective Carousel with jQuery and CSS3 - CSSSlider

  13. No Image 07Nov
    by
    2018/11/07 Views 1401 

    iframe height auto resize

  14. No Image 07Nov
    by
    2018/11/07 Views 1297 

    getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드

  15. No Image 07Nov
    by
    2018/11/07 Views 1396 

    비활성화 된 라디오버튼 클릭 시 경고창 생성

  16. No Image 28Sep
    by
    2018/09/28 Views 3610 

    특정영역 제외하고 body 클릭

  17. No Image 28Sep
    by
    2018/09/28 Views 1884 

    따욤표 중복으로 출력하기

  18. No Image 27Sep
    by
    2018/09/27 Views 2553 

    [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기

  19. No Image 06Sep
    by
    2018/09/06 Views 2146 

    [jQuery] split, join 으로 공백제거 하기

  20. No Image 06Sep
    by
    2018/09/06 Views 1819 

    [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기

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

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

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