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 로 탭메뉴 보였다 안보였다 맹글기

단축키

단축키

흐르는 배너 만들기2

화면 이동시에 레이어가 따라다니게 하기

행에 징검다리 스타일 입히기 (:odd, :even)

항상 최신버전으로 사용하기

항상 레이어가 정 가운데 위치하는 스크립트

하단 고정 레이어 스타일(CSS) 따라하기

페이지 이동 제어 - href, replace, pushState()

파일 업로드 방법, 이미지 파일 업로드 예제 소스

특정영역 제외하고 body 클릭

텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다.

터치 디바이스 분기처리

키보드 이벤트가 발생한 객체의 id값 알아내기

최초 접속시 css와 script가 로딩되지 않을때

체크박스 전체선택/해지

체크박스 또는 라디오 버튼의 체크여부 변경하기

중복 없는 랜덤

제이쿼리에서 클래스(class) 이름 추가/삭제

정규식, 한글 못쓰게 하기, replace all

입력폼에 입력되는 값의 유효성 체크하기 두번째

이미지 회전, rotate();

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

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

단축키

단축키

흐르는 배너 만들기2

화면 이동시에 레이어가 따라다니게 하기

행에 징검다리 스타일 입히기 (:odd, :even)

항상 최신버전으로 사용하기

항상 레이어가 정 가운데 위치하는 스크립트

하단 고정 레이어 스타일(CSS) 따라하기

페이지 이동 제어 - href, replace, pushState()

파일 업로드 방법, 이미지 파일 업로드 예제 소스

특정영역 제외하고 body 클릭

텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다.

터치 디바이스 분기처리

키보드 이벤트가 발생한 객체의 id값 알아내기

최초 접속시 css와 script가 로딩되지 않을때

체크박스 전체선택/해지

체크박스 또는 라디오 버튼의 체크여부 변경하기

중복 없는 랜덤

제이쿼리에서 클래스(class) 이름 추가/삭제

정규식, 한글 못쓰게 하기, replace all

입력폼에 입력되는 값의 유효성 체크하기 두번째

이미지 회전, rotate();