웹디자인 노트/웹관련 튜토리얼

한개 또는 두개이상의 Div ShowHide 하는 스크립트..

서관덕의 시간이 머문 작은공간™ 2008. 8. 15. 20:14

아래의 코드를 js 파일 또는 head 사이에 넣어주세요...

<script>
// 바로 아래에 있는 코드는 단순한 목적 div만 보이거나 숨길때 쓰는거..
function view_div(num)
  {
    obj_1 = document.getElementById("no_cont");
    obj_2 = document.getElementById("no_cont_1");
    if(num == 1)
    {
      obj_1.style.display = 'block';
      obj_2.style.display = 'none';
    }
    if(num == 2)
    {
      obj_1.style.display = 'none';
      obj_2.style.display = 'block';
    }
  }

// 바로 아래에 있는 코드는 목적 div와 버튼쪽 div도 같이 보이거나 숨길때 쓰는거..
function view_div(num)
  {
    obj_1 = document.getElementById("no_cont");
    obj_2 = document.getElementById("no_cont_1");
  b1_obj_1 = document.getElementById("aa_01");
  b1_obj_2 = document.getElementById("aa_02");
  b2_obj_1 = document.getElementById("bb_01");
  b2_obj_2 = document.getElementById("bb_02");
    if(num == 1)
    {
      obj_1.style.display = 'block';
      obj_2.style.display = 'none';
  b1_obj_1.style.display = 'block';
      b1_obj_2.style.display = 'none';
  b2_obj_1.style.display = 'none';
      b2_obj_2.style.display = 'block';
    }
    if(num == 2)
    {
      obj_1.style.display = 'none';
      obj_2.style.display = 'block';
  b1_obj_1.style.display = 'none';
      b1_obj_2.style.display = 'block';
  b2_obj_1.style.display = 'block';
      b2_obj_2.style.display = 'none';
    }
  }

</script>