페이지 이동 없이 탭메뉴 자바스크립트로 iframe 효과 내기

2012. 9. 12. 11:35 Web/javascript


absolute되는 페이지에 부모 세로 영역을 고정하면 생기는 여백문제때문에
다른 방법을 찾는 분들에게 유용한 자료가 되겠습니다.

//-----------------------------------------------------------------------------------
// 페이지 이동 없이 현재페이지에서 탭메뉴로 iframe 효과 내기
//-----------------------------------------------------------------------------------

function tabOn(tabid,a) {
        var ID = document.getElementById(tabid,a);

    for (i=1;i<=10;i++) {
     if(i<10){inn="0"+i;} else {inn=""+i;}
     tabMenu = document.getElementById("tab"+tabid+"m"+i);
     tabContent = document.getElementById("tab"+tabid+"c"+i);
     if (tabMenu) { //객체가존재하면
      if (tabMenu.tagName=="IMG") { tabMenu.src = tabMenu.src.replace("on0" + i + ".gif", "off0" + i + ".gif");} //이미지일때
      if (tabMenu.tagName=="A") { tabMenu.className=""; } //앵커일때
     }
     if (tabContent) { tabContent.style.display="none"; }
    }

    if(a<10){ann="0"+a;} else {ann=""+a;}
    tabMenu = document.getElementById("tab"+tabid+"m"+a);
    tabContent = document.getElementById("tab"+tabid+"c"+a);
    //alert(tabMenu.tagName);
    if (tabMenu) { //객체가존재하면
     if (tabMenu.tagName=="IMG") { tabMenu.src = tabMenu.src.replace( "off0" + a + ".gif", "on0" + a + ".gif"); } //이미지일때
     if (tabMenu.tagName=="A") { tabMenu.className="on"; } //앵커일때
    }
    if (tabContent) { tabContent.style.display="block"; }
    tabMore = document.getElementById("tab"+tabid+"more");
    }


<ul class="org_tab">
      <li class='orgBtn1'>
           <a href="#" onclick="tabOn(2,1); return false;" onfocus="tabOn(2,1);" title="">
              <img src="/images/tab_on01.gif" alt=""  id="tab2m1" />
            </a>
      </li>
</ul>  

<div class="org_con">
   <p id="tab2c1" style="display:block;"><img src="/images/organ/org_img1.jpg" alt="" /></p>
</div>


 

Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET