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

탭을 클릭할때 탭메뉴 이미지가 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();
});

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

단축키

Articles