홈페이지상 자주하는 질문 형식의 제목과 내용을 같이 보여줄때..
제목클릭시 내용을 보여주고 다른 제목 클릭시 기존에 열려있던 내용을 닫고 새로운 내용을
보여주기 위한 스크립트입니다. 부가적으로 클릭이미지도 변경가능합니다.
사용법=============================================================
변하게 할 이미지에 id="layer_on_off_img1" 값을준다 ex) <img src="url" id="layer_on_off_img1">
보여주고 감출 내용 table 에 id="layer_on_off_div1" 값을 준다 ex) <table id="layer_on_off_div1">
실행 조건을 걸어준다 layer_on_off(2,8,'image/detail_btn.jpg','image/close_btn.jpg');
여기서 숫자 8 은 총레이어 개수를 뜻합니다.
ex) <img src="url" id="layer_on_off_img1" onClick="layer_on_off(1,8,'image/detail_btn.jpg','image/close_btn.jpg');">
사용법======================================================================
<script>
/* 네임뒤숫자값(클릭되는숫자), 총레이어수, 체인지될버튼이미지, 기본버튼이미지*/
function layer_on_off(id,cnt,change_src,defualt_src){
var click_div_temp = "layer_on_off_div" + id; /* 현재 클릭한 div 온아웃 될 네임 과 id 조합 */
var click_img_temp = "layer_on_off_img" + id; /* 현재 클릭한 img 체인지 될 네임 과 id 조합 */
if(document.getElementById(click_div_temp).style.display == "none"){ /* 열려있는 페이지를 클릭시 닫기위해 */
for(var i = 1; i <= cnt; i++){ /* cnt 총레이어수 많큼 루프 */
var div_temp = "layer_on_off_div" + i; /* div 온아웃 될 네임 과 id 조합 */
var img_temp = "layer_on_off_img" + i; /* img 체인지 될 네임 과 id 조합 */
if(i != id){ /* 선택되지 않은 것들의 페이지를 닫기위해 선언 */
document.getElementById(div_temp).style.display = "none"; /* div를 감춘다 */
document.getElementById(img_temp).src = change_src; /* 이미지를 바꾼다 */
}else{
document.getElementById(div_temp).style.display = "";
document.getElementById(img_temp).src = defualt_src;
}
}
}else{
document.getElementById(click_div_temp).style.display = "none";
document.getElementById(click_img_temp).src = change_src;
}
}
</script> |
|
추천 : 