[JavaScript] style.display

보통 탭메뉴 구현시 DIV 및 SPAN 태그 안에 있는 내용을 숨겼다가 보였다가 하는 자바스크립트 로직을 많이 구현한다.

보통 구현 할때 스크립트 function을 보면..

 

function tabEvent(num) {

  if(num == "1") {

     document.getElementById('div1').style.display = "block";

     document.getElementById('div2').style.display = "none"; 

  } else if(num == "2") {

     document.getElementById('div1').style.display = "none";

     document.getElementById('div2').style.display = "block"; 

 }

}

 

이런식으로 함수를 만든다.  여기서 num은 선택한 div의 index 번호 일 것이다.

탭이 여러개 일 수록 중복된 코드가 늘어나게 된다.

나 또한 4개의 탭을 if elseif 문을 이용하여 많은 라인을 차지하게 코딩을 하였다.

그러다 더 추가되는 탭에 대해 지저분한 코드가 되어 생각해보다가

다음과 같이 function을 수정하게 되었다.

 

function tabEvent(num) {

  for(i=1; i<=2; i++) {

     if(i == num) {

        document.getElementById('div' + i).style.display = "block"; 

     } else {

        document.getElementById('div' + i).style.display = "none"; 

     }

  }

}

 

다음과 같이 탭의 갯수가 여러개가 되더라도 for문의 숫자 2를 탭갯수만큼 써주면 된다.

자. 생각하면서 코딩하자. 

[출처] 탭 메뉴 구현시 style.display 속성 활용법 (불경기에 돈모으는 모임 & 프로그램 개발자 모임) |작성자 돌