updated_at: 2024-12-15 07:28

클릭시 특정 엘리먼트만 보이게 하기

js

function display(box){
  for(var i=1; i<=4; i++){
    if(i == box){ 
      document.getElementById("content"+i).style.display = 'block';
    } else {
      document.getElementById("content"+i).style.display = 'none';
    }
  }
}

css

#content1, #content2, #content3, #content4 {
  display: none;
}

html

  <a onclick="display(1)">item A</a> |
  <a onclick="display(2)">item B</a> |
  <a onclick="display(3)">item C</a> |
  <a onclick="display(4)">item D</a> |
  

 <div id="content1">Contents A</div>
 <div id="content2">Contents B</div>
 <div id="content3">Contents C</div>
 <div id="content4">Contents D</div>

See the Pen 클릭시 특정 엘리먼트 숨기고 보이게 하기 by younghyeong ryu (@wangta69) on CodePen.

평점을 남겨주세요
평점 : 2.5
총 투표수 : 1

질문 및 답글