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