메뉴 건너뛰기

조회 수 1380 추천 수 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();
});





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
» jQuery 로 탭메뉴 보였다 안보였다 맹글기 2019.01.10 1380
95 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